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

Question

Is there an easier way to make something appear slowly on a web page? I tried to gradually increase the opacity of the CSS, but the opacity tag is different for each browser. Is there a well-known Javascript function that everyone uses? Or is there any css tag?

[edit] Thanks for the jQuery suggestion. Is there any other option? My page is very small and does not want to add jQuery. (I know that Google supports it)

Answer 1

Aargh! , JS jqueryitis!
, , :)

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

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

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

Answer 2

JQuery:

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

Answer 3

! , , jQuery, .

; IE . . , JavaScript.

Answer 4

jQuery, animate() .

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

. . animate()

fadeIn

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

Answer 5

YUI , .

YUI Animation

Answer 6

fadein fadeout jQuery. , jQuery('#ID').fadeout() "ID", id ( ),

Answer 7

jQuery. fadeIn(). : http://api.jquery.com/fadeIn/. Javascript , jQuery.

Answer 8

You can also use slideDown.

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