jquery – 如何进行淡入淡出过渡’crossfade’？

$('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;
});

两个图像之间的交叉淡入淡出(其中一个淡出而另一个淡入)需要两个图像,每个图像都有自己的动画.仅使用一个图像标记就无法做到这一点.你需要两张图片.有一些方法可以为其中一个图像使用背景图像,但坦率地说,这比使用两个< 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/

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

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