jquery - 取消鼠标悬停时的 mouseleave 事件

Question

我正在尝试复制此页面上的效果:http://blacknegative.com/#!/bullittagency/ (您可能需要向右滑动，单击“菜单”并选择第 04 部分才能看到它)

这是我到目前为止所拥有的:http://codepen.io/semajtwin/pen/IcBxu

问题是，反复将鼠标从一个框移动到另一个框，mouseleave 事件仍然会被触发。如果鼠标回到 div 上，我正在尝试找到一种方法来取消 div 上的 mouseleave 事件。也许有更好的方法来做到这一点。

jQuery:

$(document).ready(function() {

  $('.item').mouseenter(function() {
    $(this).css({
      'opacity': 0
    });
  }).mouseleave(function() {
    $(this).delay(300).animate({
      'opacity': 1
    }, 500);
  });
});

提前致谢。

Answer 1

您可以使用stop()函数来停止在 mouseleave 事件中创建的动画:

$(document).ready(function() {

  $('.item').mouseenter(function() {
    $(this).stop().css({
      'opacity': 0
    });
  }).mouseleave(function() {
    $(this).delay(300).animate({
      'opacity': 1
    }, 500);
  });
});

<强> Working Demo