fade in all divs of a page. once the content of the divs is loaded

Question

Sorry, Ill try simplify my question. Basically, when a user goes to a page...all the divs on the page and the content of the div fade in. Once loaded. I was thinking maybe something like:

$(window).load(function(){ 
  $('#div').load(function () { 
    $(this).fadeIn(4000); 
  });
}); 

cheers

Answer 1

Perhaps something like this will do what you need:

$(function() { // execute when DOM Ready:
  $("#div").load("someOtherFile.html", function() { 
    $(this).fadeIn(4000);
  }).hide();
});

Answer 2

So you're not loading in any dynamic content, right? Have you tried, simply:

$(window).load(function(){ 
   $('#div').fadeIn(4000);
});

$(window).load shouldn't fire until the whole page is loaded anyway--you shouldn't need to test again for the div/img. Doing so might be leading to some weirdness. You want this placed outside of $(document).ready(). See: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

Perhaps this was so simple it was overlooked, but to at least clarify the first code posting for others, the line:

$('#div').fadeIn(4000); Would only work on . It may or may not work on descendante tags, depending upon their properties.

if you selected $('div').fadeIn(4000); that would perform the function on all div tags at once. And

$('.div').fadeIn(4000); Would work on all objects with a class named 'div:

Regards,

Answer 4

James is correct, change your code to:

$(window).load(function(){ 
   $('div').fadeIn(4000);
});

using $('#div') only selects elements with an id of 'div'