jQuery - 快速移动鼠标时，Mouseleave 不会触发

Question

类似问题有一些答案，但没有一个对我有用，同时仍然给我带来预期的效果，或者没有一个我理解。所以任何帮助或指导都会很棒

这是一个小提琴： http: //jsfiddle.net/csoh1vzb/

本质上发生的情况是，当您快速将鼠标悬停在单元格上时，该mouseleave函数不会运行，并且我仍处于活动状态。

我已经“解决了一半”，但它仍然不是我想要的那样。

添加此内容mouseenter可修复下一次悬停时的问题：

$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });

（并不是真正的修复）

任何帮助都会很棒！

Answer 1

问题不在于未触发 mouseleave，您面临的问题是动画需要 400 毫秒（默认动画持续时间）才能完成，这意味着动画在您离开时应用后直接覆盖 mouseleave css 更改比如说 300ms 内的场

为了避免这种情况，您需要停止动画。

$('.cell span').stop();
$('.cell .hover').fadeOut();

应该做到这一点。

作为旁注，如果您使用 javascript 制作动画，最好更改为velocity.js，它比 jQuery 的 animate 快得多。