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

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 2

Have a look at the JQueryUI library - that has functionality for this...

Answer 3

Easy with Jquery:

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

Answer 4

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 5

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 6

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

YUI Animation

Answer 7

Aargh! Every JS developer here seems to have contracted the jquerytis!
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, steps, speed){
    var t_o;
    i = i || 0;
    steps = steps || 5;
    speed = speed || 50;

    t_o = setInterval(function(){
        opacity = i / 100;
        i = i + steps;
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            return;
        }
        elm.style.opacity = opacity;
        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 8

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.