3

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)

Phen
  • 131
  • 1
  • 1
  • 4

8 Answers8

28

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);
Hack-R
  • 22,422
  • 14
  • 75
  • 131
Mic
  • 24,812
  • 9
  • 57
  • 70
  • `style['-moz-opacity']` wouldn't work. As a JS property name the hyphens are transformed to capitals: `style.MozOpacity`. However, `-moz-opacity` hasn't been needed since Firefox 0.9... you can certainly drop it today, as every browser except IE supports the plain CSS3 syntax. – bobince Feb 05 '10 at 14:20
  • @Mic Your function looks minimal and well-writeen but it would be perfect to also include some comments to explain what is happening and help begginers or confused coders (like me =]). Thanks – slevin Apr 09 '14 at 22:20
  • 2
    @slevin, now with comments! – Mic Apr 10 '14 at 13:41
8

Easy with Jquery:

$("#myElementID").fadeIn("slow");
ozsenegal
  • 4,055
  • 12
  • 49
  • 64
4

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.

Community
  • 1
  • 1
bobince
  • 528,062
  • 107
  • 651
  • 834
2

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
      });
rahul
  • 184,426
  • 49
  • 232
  • 263
2

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

YUI Animation

user103219
  • 3,209
  • 11
  • 39
  • 50
1

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

NawaMan
  • 25,129
  • 10
  • 51
  • 77
0

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.

Marcos Buarque
  • 3,318
  • 8
  • 44
  • 46
-1

You can use slideDown as well.

$("#YourID").slideDown("slow");
Mahib
  • 3,977
  • 5
  • 53
  • 62