fadeIn on page load

Question

I want to fade in a background of an entry within a div - this is to show the user what the most recent entry is on page load.

I want it to do it on page load, without having to click or hover or anything, just when the page loads.

I have this:

$(document).ready(function() {
  $('#box').fadeIn(5000, function() {
    // Animation complete
  });
});

Is it something like pageLoad?

Any help is appreciated.

Answer 1

Use the load event which fires page loads:

$(window).load(function() {
  $('#box').fadeIn(5000, function() {
    // Animation complete
  });
});

Answer 2

Brad, your code should work if you hide the content first and then fade it back in. jQuery cannot fade something that is already showing in the same sense that you cannot fade-out something that is already hidden.

See example

$(document).ready(function() {
  $('#box').hide().fadeIn(5000, function() {
    // Animation complete
  });
});