Question

我正在尝试使用以下代码制作图像fadeOut，仅当它淡出时，更改其来源，然后再次使其淡入淡出：

$('.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效果仅的功能，这在新图像非常大且需要更多时间时是合乎逻辑的。我不介意它加载时是否保持白色，我可以实现一个加载器.gif。但我不知道这个.load（function（）{}）;正在干扰整个事情。

Answer 1

我注意到你的两个例子之间有所不同：

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

在第一个中，“this”是#imagen，第二个“this”是.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;
});

jQuery回调函数不起作用

2 个答案: