CODEWITHSUNDEEP
javascripthtmlcss
Phen
Phen

Reputation: 141

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

Upvotes: 4

Views: 14885

Answers (8)

Mic
Mic

Reputation: 25164

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

Upvotes: 29

Mahib
Mahib

Reputation: 4063

You can use slideDown as well.

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

Upvotes: -1

bobince
bobince

Reputation: 536675

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.

Upvotes: 4

user103219
user103219

Reputation: 3229

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

YUI Animation

Upvotes: 2

Marcos Buarque
Marcos Buarque

Reputation: 3418

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.

Upvotes: 0

NawaMan
NawaMan

Reputation: 25677

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),

Upvotes: 1

ozsenegal
ozsenegal

Reputation: 4133

Easy with Jquery:

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

Upvotes: 8

rahul
rahul

Reputation: 187110

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

Upvotes: 2

Related Questions