CODEWITHSUNDEEP
fade
Anthony
Anthony

Reputation: 667

Cross-fade between two images on page load then stop

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

Upvotes: 0

Views: 1189

Answers (2)

Amir Mehdi Delta
Amir Mehdi Delta

Reputation: 179

Try this: 

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

Upvotes: 0

SLaks
SLaks

Reputation: 887877

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

Upvotes: 1

Related Questions