Cross-fade between two images on page load then stop

On开发者_开发技巧ce the page has finished loading, I would like one image to cross-fade to another. Not in a loop, just once.

The effect I would like to create can be seen here:

Blur Fade

I am sure it must be quite simple using jQuery?

Thanks in advance

You can crossfade between two images by positioning them in the same place using CSS, then calling fadeIn() and fadeOut() using jQuery.

For example:

$(function() {
    $('img.OldImage').fadeOut();
    $('img.NewImage').fadeIn();
});

Try this:

$(document).ready(function(){
    $(function() {
        $('.byeIMG').fadeOut("slow");
        $('.heyIMG').fadeIn("slow");
    });
});