How Do You Make Something To Appear Slowly On A Page Using Javascript?

Is there easier way to make something to appear slowly on webpage? I tried to incrementally increase opacity of the CSS, but it (opacity) tag is different for each browser. Is ther

Solution 1:

Aargh! Every JS developer here seems to have contracted the jqueryitis! If you're not yet infected or still want to escape from it, here's a small function that do the job cross browser :)

functionappear(elm, i, step, speed){
    var t_o;
    //initial opacity
    i = i || 0;
    //opacity increment
    step = step || 5;
    //time waited between two opacity increments in msec
    speed = speed || 50; 

    t_o = setInterval(function(){
        //get opacity in decimalsvar opacity = i / 100;
        //set the next opacity step
        i = i + step; 
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            //if 1-opaque or 0-transparent, stopreturn; 
        }
        //modern browsers
        elm.style.opacity = opacity;
        //older IE
        elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
    }, speed);
}

To appear

appear(document.getElementsByTagName('DIV')[0], 0, 5, 40);

To disappear

appear(document.getElementsByTagName('DIV')[0], 100, -5, 40);

Solution 2:

Easy with Jquery:

$("#myElementID").fadeIn("slow");

Solution 3:

Dear Lord! Yes, I think most of us do know about jQuery, thanks.

Opacity isn't so complicated to set, today; it's now only IE that needs special help. See this answer for some simple plain-JavaScript time-independent fading code.

Solution 4:

If you can use jQuery then animate() function will hep you.

$('your_selector').animate({opacity: 0.25}, 5000, function() {
    // Animation complete.
});

See .animate()

or you can use fadeIn

$('your_selector').fadeIn('slow', function() {
        // Animation complete
      });

Solution 5:

YUI Also has animate functionality and allows you to only include required modules which will reduce your load times.

YUI Animation