Question

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

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

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

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

鼠标悬停时取消mouseleave事件

1 个答案: