JavaScript: Slowly Fade Using Opacity

Posted by Richard on

The JavaScript Fade Anything Technique is great for fading a specified background color of an element back to its native color, but I wanted to dissolve an entire div, including one with images, which the current version of the Fade Anything method doesn’t allow for. After an unsuccessful search for something to suit my needs, I built my own.

Include the reference to the JavaScript file in the header of your HTML. Surround whatever you want to fade with a div tag. Apply an onclick or onmouseover method to run "javascript:slowly.fade('whatever');", making sure to assign an id to the div tag to match (i.e. id="whatever").

var opacity = 96; // Avoid starting at 100% due to Mozilla bug
var slowly = {
  fade : function (id) {
    this.fadeLoop(id, opacity);
  },
  fadeLoop : function (id, opacity) {
    var o = document.getElementById(id);
    if (opacity >= 5) {
      slowly.setOpacity(o, opacity);
      opacity -= 4;
      window.setTimeout("slowly.fadeLoop('"+id+"', "+opacity+")", 50);
    } else {
      o.style.display = "none";
    }
  },
  setOpacity : function (o, opacity) {
    o.style.filter = "alpha(style=0,opacity:" + opacity + ")";  // IE
    o.style.KHTMLOpacity = opacity / 100;           // Konqueror
    o.style.MozOpacity = opacity / 100;	            // Mozilla (old)
    o.style.opacity = opacity / 100;                // Mozilla (new)
  }
}

Works in IE6+, Firefox 1.5+, Chrome.

Save your own copy of the SlowlyFade file — do not steal my bandwidth, please!

As always, this script is provided as-is, without any warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose. In no event shall I be liable for any special, incidental, consequential or indirect damages of any kind, or any damages whatsoever resulting from loss of; use, data or profits, whether or not advised of the possibility of damage, and on any theory of liability, arising out of or in connection with the use or performance of this script.

Click anywhere in this box to get rid of this annoying status message. This is a working demonstration of how the SlowlyFade function works.

12 Responses to “JavaScript: Slowly Fade Using Opacity”

  1. Antonie Potgieter

    Thanks for this great script.

    I’m not really experienced with JavaScript, but I’m trying to figure out a way to make the fade reverse.

    If I figure it out, I will post it here. If not…maybe you could help me. :)

    Reply
  2. zephyris

    hey, great script, ive been trying to find one like this for ages. just a question though, how do i make it fade in instead of fade out? thanks

    Reply
  3. richard

    Well, the first three lines that mention “opacity” need to be altered. Instead of starting at 96, try starting at a lower number, like 10 or 20. Then change the vector from “-4” to an equally small positive number, say “4”. Change the threshold from “5” to a large number under 100, such as “95”. Lastly, replace the “o.style.display = ‘none’;” line with something else appropriate, probably functions (like the last four) to remove opacity completely.

    Reply
  5. richard

    Hmmm, you’re right. Might have something to do with the new blog design. Have to check it out…

    LOL! Forgot to include the JavaScript file in the new design. Gee, I really need someone to QA this…

    Reply
  7. Richard Viglucci

    Dear Richard,

    I need a code that will fade in a piece of text and then fade it out. I’m trying to get some quotes of mine to do that. Do you have a solution. I like your code you have here. It will help me in other projects.

    Reply
  10. Mark Olsen

    Hi,

    I rewrote your script to fit my needs. This version fades out the content of the div, and then closes it, to avoid the abrupt jump when the div is set to “display:none”. This looks kinda ajax-y – hope you like it!

    var opacity = 96; // Avoid starting at 100% due to Mozilla bug

var slowly = {

   fade : function (id) {

      this.fadeLoop(id, opacity);

   },

   fadeLoop : function (id, opacity) {

      var o = document.getElementById(id);

      if (opacity >= 5) {

         slowly.setOpacity(o, opacity);

         opacity -= 4;

         window.setTimeout("slowly.fadeLoop('" + id + "',

               " + opacity + ")", 30);

      } else {

         slowly.move(id);

         slowly.setOpacity(o, 0);

      }

   },



   move : function (id) {

      this.moveLoop(id);

   },



   moveLoop : function (id) {

      var o = document.getElementById(id);

      if (o.offsetHeight > 1) {

         o.style.height = o.offsetHeight-1 + "px";

         window.setTimeout("slowly.moveLoop('" + id + "')", 30);

      } else {

         o.style.display = "none";

      }

   },



   setOpacity : function (o, opacity) {

      o.style.filter = "alpha(style=0,opacity:" + opacity + ")";

      o.style.KHTMLOpacity = opacity / 100;

      o.style.MozOpacity = opacity / 100;

      o.style.opacity = opacity / 100;

   }

}
    Reply

Leave a Reply

  • (will not be published)