jQuery的回調函數不起作用

Question

我嘗試使用下面的代碼，以使圖像淡出，並只有時，它的淡出，改變它的來源，然後使其再次淡入：

$('.liitem').click(function() { 
$('#imagen').fadeOut('slow', function() { 
    var rutaimagen = $(this).find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){  
    $('#imagen').fadeIn('slow'); 
    }); 
}); 
return false; 
}); 

...但它不工作！我嘗試刪除fadeOut中的回調函數，然後它可以正常工作，但您可以看到新圖像突然替換之前的圖像（因爲它在fadeOut效果完成之前加載），然後淡出，然後再次進入：

$('.liitem').click(function() { 
$('#imagen').fadeOut('slow'); 
    var rutaimagen = $(this).find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){  
    $('#imagen').fadeIn('slow'); 
    }); 
return false; 
}); 

顯然我更喜歡第一個片段的工作版本。

你可以看到，我使用的觸發淡入效果只有當新的圖像加載，這是合乎邏輯的情況下，新的圖像是非常大的，需要更多的時間的函數。我不介意它在加載時保持白色，我可以實現一個加載器.gif。但是我不知道這個.load（function（）{}）;正在干擾整個事情。

Answer 1

有一件事我注意到，你的兩個例子之間的不同：

$(this).find('a').attr("href"); 

在第一階段，「本」是#imagen，在第二個「本」是.liitem。這與它有什麼關係？

Answer 2

謝謝darkporter。這是我現在的代碼，它的工作原理：

$('.liitem').click(function() { 
    var liitem = $(this); 
$('#imagen').fadeOut('slow', function() { 
    var rutaimagen = liitem.find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){ 
    $('#imagen').fadeIn('slow'); 
    }); 
}); 
return false; 
});