How do I make fade transition 'crossfade'?

问题:

I'm trying to get this to crossfade, but I'm not entirely sure how.

How can I make this jQuery method crossfade the images?

$('a.thumb').click(function () {     var src = $(this).attr('href');     if (src != $('div#imageDisplay > img').attr('src')) {         $('div#imageDisplay > img').stop().animate({ opacity: '0', duration: 500 }, function () {             $(this).attr('src', src);         }).load(function () {             $(this).stop().animate({ opacity: '1', duration: 500 });         });     }     return false; }); 

回答1:

A cross fade between two images (where one fades out and the other fades in) requires two images, each with their own animation. You can't do it with just one image tag. You will need two images. There are ways to use a background image for one of the images, but frankly that's just more complicated than using two <img> tags.

Here's some jQuery that implements a cross fade using two image tags:

You can see it work here: http://jsfiddle.net/jfriend00/frXyP/

This is basically how it works:

1. Get the current image
2. Create new image object
3. Fetch URL from the clicked on link and assign to new image tag
4. Hide the new image
5. Insert the new image into the fadeContainer
6. Initiate fadeOut of existing image and fadeIn or new image
7. When fadeOut finishes, remove that image so it's ready for the next cycle

回答2:

You cannot crossfade with one img element, you need two at-least. One to be opaque, and the other to fade. Please consider putting positioning one img over the other, setting to 'display:none' in css, then calling 'fadeIn'.

文章来源: How do I make fade transition 'crossfade'?