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

工作演示