Question

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

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

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

非常感谢您的帮助。

Answer 1

交换src后，您可以fadeOut图片，然后回调fadeIn：

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

Live example使用我们的gravatars | source

（请注意，attr不需要src; DOM元素上的reflected。

Answer 2

最简单的方式是使用一个存在的jQuery循环插件。一个@ malsup.com是一个受欢迎的选择。

如果你想自己编码，你将不得不使用2个图像元素并将其中一个置于另一个之后，并淡出顶部的图像元素。

您可以使用position: relative的父<img />和position: absolute; top: 0; left: 0;上的<img />来执行此操作。在您将顶部图像淡出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();
    });
});

委托，替换和淡入淡出/ jQuery

3 个答案: