JavaScript: Slowly Fade Using Opacity…

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.

Save your own copy of the SlowlyFade file — do not steal my bandwidth, please! Include the reference to the JavaScript file in the header of your HTML. Surround what 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"). Works in both IE6 and Firefox 1.5.

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 plugin.

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

If you liked this, you might also be interested in:

This rambling was posted on August 12, 2006
and filed under Web Development

Responses

11 Responses to “JavaScript: Slowly Fade Using Opacity…”

  1. Response #1
    Antonie Potgieter (IP) on October 17th, 2006 at 11:33 am

    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. :)

  2. Response #2
    zephyris (IP) on November 24th, 2006 at 9:07 pm

    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

  3. Response #3
    richard on November 25th, 2006 at 7:25 pm

    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.

  4. Response #4
    tom (IP) on February 8th, 2007 at 4:57 pm

    somehow it does not work mate….using FF 2.00.1

  5. Response #5
    richard on February 8th, 2007 at 8:09 pm

    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…

  6. Response #6
    Sean (IP) on February 9th, 2007 at 3:14 pm

    You rang?

  7. Response #7
    Richard Viglucci (IP) on February 20th, 2007 at 11:04 am

    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.

  8. Response #8
    Antonie Potgieter (IP) on February 23rd, 2007 at 4:36 pm

    Thanks for the great script!
    I’ve been looking for something like this.

  9. Response #9
    Morten Monrad (IP) on March 25th, 2007 at 1:29 pm

    Thanks. Long time - finally found

  10. Response #10
    Mark Olsen (IP) on March 27th, 2008 at 9:32 am

    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;
   }
}
  11. Response #11
    Patric (IP) on May 15th, 2008 at 4:36 am

    I really want to thank for this code

Contribute to the Conversation: