jQuery Chrome / Safari FadeOut

Question

So I'm trying to make a very simple effect where two images that are laid on top of each other using positioning crossfade when the page loads. I have it almost working just right in FF and IE8 except it does not crossfade when you first visit the page, you must refresh for the fade to occur.

The effect is loaded here: http://www.cloudfarmstudio.com/image%20fade%20test/

Can anyone tell me what I'm doing wrong!?

Thanks!

Answer 1

The issue is in using $(document).ready . Ready fires as soon as the DOM is loaded, this is before the images have loaded. So you're trying to fade out an image that hasn't loaded yet. You can fix this by using $(window).load .

$(window).load(function(){
  $('.OldImage').fadeOut();
});