Question

我正在使用jQuery悬停事件使元素“发光”（不透明度从0.7变为1），然后鼠标离开时“unglow”。这很好，除非你不小心将鼠标放在元素上几次。然后该元素将在鼠标经过时多次开始闪烁（“发光”和“不正常”）。

这不仅难看，而且还意味着需要运行的任何其他jQuery .animate（）事件必须等到这些连续的闪存完成。可以在此处找到一个示例：http://www.rootsoftllc.com/accounts/

有没有办法告诉jQuery悬停事件它只能运行一次，然后它必须等到它完成才能再除了鼠标事件了？

Answer 1

是的，实际上非常简单。在启动动画之前.animate()将.stop()放入其中以停止队列中的任何其他动画。

在这里阅读：

The jquery online documentation on .stop()

Answer 2

您可以使用.stop(true, true)来停止和清除动画队列，如下所示：

$('.window').hover(function() {
    $(this).stop(true, true).animate({opacity: 1}, 500);
}, function() {
    $(this).stop(true, true).animate({opacity: 0.7}, 500);
});

Answer 3

在jQuery中，您可以为每个动画提供自己的队列。我建议你给悬停效果一个自己的队列，这样它就不会干扰其他动画。然后，您可以检查鼠标在元素中的时间长度。如果它没有足够长的时间让动画完成，请使用.stop()过早地停止动画，然后快速动画回到它应该的位置。

有没有办法取消jQuery的悬停事件发生？

3 个答案: