jquery - 如何进行淡入淡出过渡 'crossfade' ？

Question

我正在尝试让它交叉淡入淡出，但我不完全确定如何做。

我怎样才能让这个 jQuery 方法交叉淡入淡出图像？

$('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

两个图像之间的交叉淡入淡出(其中一个淡出，另一个淡入)需要两个图像，每个图像都有自己的动画。仅使用一个图像标签是无法做到这一点的。您将需要两张图像。有多种方法可以为其中一张图像使用背景图像，但坦率地说，这比使用两张 <img> 更复杂。标签。

这里有一些使用两个图像标签实现交叉淡入淡出的 jQuery:

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

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/frXyP/

这基本上是它的工作原理:

1. 获取当前图像
2. 创建新的图像对象
3. 从点击的链接中获取网址并分配给新的图像标记
4. 隐藏新图片
5. 将新图像插入到 fadeContainer 中
6. 启动现有图像的淡出和淡入或新图像
7. 淡出完成后，删除该图像，以便为下一个周期做好准备