委派、替换和淡入/ jQuery

Question

一个与jQuery相关的问题-我有一个小画廊风格的脚本工作-缩略图的列表和相关的大图像切换缩略图点击，如下所示：

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

我的问题是:让图像之间的过渡相互褪色而不是直接切换的最简单方法是什么？

非常感谢您的帮助。

Answer 1

您可以对图片进行fadeOut，然后在交换src后的回调中使用fadeIn

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

使用我们的gravatars的Live example | source

(请注意，对于src，不需要通过attr；它是DOM元素上的reflected。)

Answer 2

最简单的方法是使用现有的jQuery周期插件之一。其中@ malsup.com是一个很受欢迎的选择。

如果你想自己编写代码，你必须使用2个图像元素，并将一个元素放在另一个元素上，然后淡出顶部的一个元素。

您可以通过在<img />的父级上使用position: relative和在<img />上使用position: absolute; top: 0; left: 0;来完成此操作。将顶部图片淡出fadeOut()后，可以在回调中将其移除：

$('img_on_top').fadeOut('slow', function () {
    $(this).remove();
});

Answer 3

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