jquery - 委托(delegate)、替换和淡出/jQuery

Question

一个与 jQuery 相关的问题 - 我有一个小的画廊样式脚本正在工作 - 缩略图列表和关联的较大图像在缩略图单击时切换，如下所示:

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

我的问题是:使图像过渡在彼此之间淡入淡出而不是直接切换的最简单方法是什么？

非常感谢您的帮助。

Answer 1

您可以fadeOut图像，然后 fadeIn在交换 src 后的回调中:

$('#thumbs').delegate('img','click', function(){
    var src = this.src.replace('thumb', 'large');
    $("#largeImage").fadeOut(function() {
        this.src = src;
        $(this).fadeIn();
    });
});

Live example使用我们的头像| source

(请注意，无需为 src 遍历 attr；它是 DOM 元素上的 reflected。)