Cross-fade between two images on page load then stop

Question

Once 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

Answer 1

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();
});