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

显然我更喜欢第一个片段的工作版本。

您可以看到，我使用的函数仅在加载新图像时触发 fadeIn 效果，这在新图像非常大且需要更多时间的情况下是合乎逻辑的。我不介意它在加载时是否保持白色，我可以为此实现一个 loader .gif。但我不知道这个 .load(function(){}); 是否有效干扰了整个事情。

Answer 1

我注意到您的两个示例之间存在不同之处:

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

在第一个中，“this”是#imagen，在第二个中“this”是.liitem。这有什么关系吗？