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

Question

类似问题有几个答案，但没有一个对我有用，同时仍能给我想要的效果，或者没有一个是我理解的。所以任何帮助或指导都会很棒

这是一个 fiddle : http://jsfiddle.net/csoh1vzb/

本质上，当您快速将鼠标悬停在单元格上时，mouseleave 函数不会运行，而我仍处于事件状态。

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

将此添加到 mouseenter 可解决下一次悬停时的问题:

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

(不是真正的修复)

任何帮助都会很棒!

Answer 1

问题不是没有触发 mouseleave，您面临的问题是动画需要 400 毫秒(默认动画持续时间)才能完成，这意味着动画在应用时直接覆盖 mouseleave css 更改你在 300 毫秒内离开场

为避免这种情况，您需要 stop动画。

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

应该可以解决问题。

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