Question

我已经整理了一个脚本，其中主图像加载一次点击缩略图，但是当前图像只是在从一个缩略图图像点击到另一个图像时交换，我希望有一个更平滑的过渡。

我的代码到目前为止..

 $('#thumbnails ul li').click(function(){
    $('#main').fadeOut(500, function() {
        $('#main').attr('src',$(this).find('img').attr('src').replace('small/', 'large/'));
}).fadeIn(500);
return false;
});

使用上面的代码，它会顺利淡出，但是我无法让下一张图像在点击时淡入淡出。你知道这可能是什么吗？

由于

Answer 1

使用您提供的小片段来评估问题有点困难。尝试使用.hide()

隐藏新图像

 $('#thumbnails ul li').click(function(){
    $('#main').fadeOut(500, function() {
        $('#main').attr('src',$(this).find('img').attr('src').replace('small/', 'large/')).hide();
}).fadeIn(500);
return false;
});

Answer 2

您应该将$(this).find('img')...置于fadeOut方法的上下文之外，代码中this不会引用您想要的元素（li元素），试试这个：

$('#thumbnails ul li').click(function(){
    var src = $(this).find('img').attr('src').replace('small/', 'large/');
    $('#main').fadeOut(500, function() {
        $(this).attr('src', src);
        $(this).on('load', function(){
            $(this).fadeIn()
        })
    })
    return false;
});

更换光源后淡出/淡入图像

2 个答案: