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/

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

获取当前图片
创建新图像对象
从点击的链接中获取网址并分配给新的图片代码
隐藏新图片
将新图像插入fadeContainer
启动fadeOut现有图像和淡入淡出或新图像
当fadeOut完成时，删除该图像以便为下一个周期做好准备

Answer 2

你不能用一个img元素交叉淡入淡出，你至少需要两个。一个是不透明的，另一个是褪色的。请考虑将一个img定位在另一个上，在css中设置为'display：none'，然后调用'fadeIn'。

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

2 个答案: