鼠标悬停时取消mouseleave事件-Java 学习之路

我正在尝试复制此页面上的效果：http://blacknegative.com/#!/bullittagency/（您可能需要向右滑动，单击'Menu'并选择第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);
  });
});

提前致谢 .

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

回复于 2024-05-02T00:34:09+08:00

鼠标悬停时取消mouseleave事件

1 回答

相关问题