javascript - jquery fadeIn() fadeOut() 动画的问题

Question

我正在创建一个可过滤的图库，以便用户可以选择类别，而图库将仅显示该类别的图像。

我想在悬停时更改图像，这非常简单。现在我正在尝试添加用于更改图像的动画，所以我希望旧图像会淡出然后更改图像并在更改图像后淡入。

我也做到了，但是有一个我无法弄清楚的错误。这仅在第一次运行时效果很好，然后再执行一次动画。例如，当我第二次悬停时，动画工作 2 次，如果我第 4 次悬停，动画工作 4 次。

$('.product_image').mouseenter(function() {
  $(this).fadeOut('fast', function() {  
    $(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
  });

  $('.product_image').mouseleave(function() {
    $(this).fadeOut('fast', function() { 
      $(this).attr('src', 'realimage').fadeIn();
    });

Answer 1

问题是因为 mouseleave 事件嵌套在 mouseenter 中，所以您每次都添加一个新的事件处理程序。

要解决此问题，请分离事件处理程序:

$('.product_image').mouseenter(function() {
  $(this).fadeOut('fast', function() {
    $(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
  });
});

$('.product_image').mouseleave(function() {
  $(this).fadeOut('fast', function() {
    $(this).attr('src', 'realimage').fadeIn();
  });
});

请注意，您还可以通过在单个 jQuery 对象中使用 on() 来使其更加简洁:

$('.product_image').on({
  mouseenter: function() {
    $(this).fadeOut('fast', function() {
      $(this).attr('src', 'www.mydomain.com/img/default.jpg').fadeIn();
    });
  },
  mouseleave(function() {
    $(this).fadeOut('fast', function() {
      $(this).attr('src', 'realimage').fadeIn();
    });
  }
});