替换源后淡出/淡入图像答案

【问题标题】：Fade out/fade in image after replacing source替换源后淡出/淡入图像
【发布时间】：2012-08-24 00:50:23
【问题描述】：

我已经编写了一个脚本，一旦单击缩略图就会加载主图像，但是当前图像只是在从一个缩略图图像单击到另一个图像时交换，我希望有一个更平滑的过渡。

到目前为止我的代码..

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

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

谢谢

【问题讨论】：

标签： jquery image switch-statement

【解决方案1】：

您应该将$(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】：

用你给出的小 sn-p 来评估问题有点困难。尝试使用.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;
});

【讨论】：