如何进行淡入淡出过渡'交叉渐变'？

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. 从单击的链接获取URL并分配给新的图像标记
4. 隐藏新图像
5. 将新图像插入fadeContainer
6. 启动fadeOut现有图像和淡入淡出或新图像
7. 当fadeOut完成后,删除该图像,以便为下一个周期做好准备