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