How do you make something to appear slowly on a page using Javascript?

Question

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 there well know Javascript function that everyone uses? Or is there any css tag?

[edit] Thanks for Jquery suggestion. Is there other option? My page is very small and don't want to add Jquery. (I know about Google hosting it)

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

function appear(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 decimals
        var 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, stop
            return; 
        }
        //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);

Answer 2

轻松使用Jquery：

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

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

Answer 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
      });

Answer 5

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

YUI Animation

Answer 6

You fadein and fadeout of jQuery. For example, jQuery('#ID').fadeout() will make an element with 'ID' as its id to fade out (slowly disappear),

Answer 7

I recommend using jQuery. You will have to use the fadeIn() function. Detailed explanation here: http://api.jquery.com/fadeIn/ . I rarely use pure Javascript after having started with the jQuery library.

Answer 8

您也可以使用slideDown。

$("#YourID").slideDown("slow");