更換源後淡出/淡入圖像

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