CODEWITHSUNDEEP
jquery
Chase Florell
Chase Florell

Reputation: 47417

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

Upvotes: 8

Views: 14861

Answers (2)

jfriend00
jfriend00

Reputation: 707856

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:

// 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 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

Upvotes: 13

Fresheyeball
Fresheyeball

Reputation: 30015

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'.

Upvotes: 3

Related Questions