jquery - 替换源后淡出/淡入图像

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;
});