Make Animation Online - Fade in and Fade out

Move Fade Resize Drag and Drop News ticker Slideshow Grid Social Bookmark Home

Fade in and fade out is also a very popular effect used by web designers. There are 2 ways you can do to achieve the effect. One you can use the color gradient to fade in or out. But this only works on the text and background. Most widely used method is using browser opacity. But you have to deal with browser differences on the methods to implement opacity.

CSS of Opacity

Drag the slider to set the value of opacity.

{
opacity: ; /* CSS3 */
MozOpacity: ; /* FF */
KhtmlOpacity: ; /* Safari */
filter: alpha(opacity = ); /* IE */
}

Function to set opacity

If you like to set opacity of an element in javascript, the following function gets the equivalent effect as the CSS above.

function Opacityto(elm,v){
    elm.style.opacity = v/100; 
    elm.style.MozOpacity =  v/100; 
    elm.style.KhtmlOpacity =  v/100; 
    elm.style.filter=" alpha(opacity ="+v+")";
}

Vice versa, to get the opacity of the existing opacity use the following function. Note the function uses getstyle function and converts opacity to integer for non-ie browers for convenient use with the following fadeIn and fadeOut methods.

function getOpacity(elm) {
    var opt1 = getstyle(elm, "filter");
    var opt2 = getstyle(elm, "opacity");
    var opt3 = getstyle(elm, "MozOpacity");
    var opt4 = getstyle(elm, "KhtmlOpacity");
    if (opt1!="none") {
        opt = opt1.replace(/[^\d]+/g,"");
    }
    else {
        opt = (opt2!=null) ? opt2 : ((opt3!=null) ? opt3 : opt4);
        opt = opt*100;
    }
    return opt;
}

Today, a lot of people use the API of jQuery to achieve the effect. I cloned the methods of fadeIn and fadeOut of jQuery. The code for the 2 methods is less than 20 lines, but you use as jQuery and has all jQuery has. Here are some examples.

image text

fade in

Building started in 753 B.C. The Romans had a story to explain how Rome began. Twin boys, Romulus and Remus, were the sons of Mars (the Roman god or war). An evil uncle took them as babies from their mother and threw them into the River Tiber to drown. The babies floated to land, and a mother wolf fed and cared for them. Later a herdsman looked after the twins until they grew up.

Animation fade in and fade out

You can test the animations of fade in and fade out on the text and image on the left.

fade in fade out

Accept only one argument - the time of fading. Applicable for both image and text.

fade in callback fade out callback

Besides the time of fading, accepts a callback function which can be fired after the end of fading.

More Demos

fadeIn and fadeOut slideshows

Script for fade in and fade out

Now let's take look at the script for fade in and fade out.

function $(id) {
var $ = document.getElementById(id);

$.fadeIn = function(delay,callbk,out) {
    var _this = this;
    _this.style.zoom = 1; // for ie, set haslayout
    _this.style.display="block"; 
    for (i = 1; i <= 100; i++) {
      (function(j) {
            setTimeout(function() {  
                  if (out==true) j=100-j;
                  opacityto(_this, j);
                  if (j==100&&callbk!=undefined) {callbk.call(_this);}
                  else if (out==true&&callbk!=undefined&&j==0) {callbk.call(_this);}
                  },j*delay/100);
                 
        })(i);     
    }
};

$.fadeOut = function(delay,callbk) {
    $.fadeIn(delay,callbk,true);
};

return $;
}

How to use?

FadeIn and fadeOut without call back.

$("imgid").fadeIn(1000); // fadein in 1 second

$("imgid").fadeOut(1000); // fadeout in 1 second

FadeIn and fadeOut with call back. 

$("imgid").fadeIn(1000, function(){
    $("imgid").fadeOut(1000);
}); // fadein in 1 second and then fadeout in another 1 second

$("imgid").fadeOut(1000, function() {
    $("imgid").fadeIn(1000); 
}); // fadeout in 1 second and fadein in another 1 second

Update

Mar. 26, 2010 - one bug was found in IE 7, to fadeIn or fadeOut the text in a div box. This div should be set haslayout with whatever CSS statement or in javacript. The following code is added in the about script to fix the quirk.

    _this.style.zoom = 1;

Sep. 04, 2010 - introduce the function of Opacityto to make the script more concise.

Social Bookmark

Related Links:

setTimeout in js object
- Basic technique to make animation online in Javascript

Last updated on Sep.04, 2010
www.pagecolumn.com