更换源后淡出/淡入图像

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

隐藏的新形象你应该把$(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; 
}); 

Answer 2

它有点难以评估你给的小片段的问题。试着用.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; 
});