How to make a crossover with a gradual transition?

Question

I am trying to do this for a crossfade, but I'm not quite sure how to do it.

How can I make this jQuery method a crossfade of 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; }); 

Answer 1

Cross fading between two images (where one disappears and the other disappears) requires two images, each with its own animation. You cannot do this 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, it is much more complicated than using two <img> tags.

Here's some jQuery that implements cross-fading using two image tags:

 // precache all images so they will load on demand var imgs = []; $('a.thumb').each(function() { var img = new Image(); img.src = this.href; imgs.push(img); }).click(function () { var oldImg = $("#fadeContainer img"); var img = new Image(); img.src = this.href; var newImg = $(img).hide(); $("#fadeContainer").append(img); oldImg.stop(true).fadeOut(500, function() { $(this).remove(); }); newImg.fadeIn(500); return false; });​ 

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

This basically works:

• Get current image
• Create a new image object
• Extract URL from link to link and assign a new image tag
• Hide new image
• Insert a new image into fadeContainer
• Initiate fadeOut an existing image and fadeIn or a new image
• When fadeOut ends, delete this image so that it is ready for the next loop

Answer 2

You cannot cross with one img element, you need at least two. One is to be opaque, and the other is to disappear. Please consider positioning one img over another by setting "display: none" to css, then calling "fadeIn".