jQuery Fade-In OnLoad?

Question

Okay what I am simply looking for is a short/easy script that will allow me to replace the DIV name so that I can have multiple divs on a page fadein once loaded (including images within them).

Any ideas?

Thank you!

Solution 1

Give the divs a common class (e.g. "fade") and use code similar to this

$(document).ready(function(){
    $(".fade").hide(0).delay(500).fadeIn(3000)
});

http://jsfiddle.net/5td73/

Solution 2

Put this code in your javascript file, for each element you want to fade it add the class="fadeOnLoad" code and make sure to add display: none to the css for any elements you want to have hidden on load:

$(document).ready(function() {
       $('.fadeOnLoad').fadeIn('slow');
);

Comments

[Aaron Brewer]

Sweet! Thank you as well sir.

[Aaron Brewer]

Suprisingly it's not working in my code. I have called out jQuery 1.6.4. from CDN, and have added the script in-between the head tags. Do I need to define OnLoad or call that out as well? Because the only code I have is the code that's provided within the jsFiddle. Thanks!

[Joseph Marikle]

@AaronBrewer Yes, you are correct! You need to run the code after the page is loaded. You can do this by either placing your script tag at the end of the body element (as I did in my fiddle) or wrapping it in a $(document).ready() function. I'll update my answer with the second option.