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

Posted 2023-03-06

【中文标题】有没有办法在它发生时取消 jQuery 的悬停事件？

【英文标题】：Is there a way to cancel jQuery's hover event while it is happening?

【发布时间】：2011-10-31 15:53:54

【问题描述】：

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

这不仅丑陋，而且还意味着任何其他需要运行的 jQuery .animate() 事件必须等到这些连续的闪烁完成。一个例子可以在这里找到：http://www.rootsoftllc.com/accounts/

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

【参考方案1】：

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

在此处阅读：

The jquery online documentation on .stop()

【参考方案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);
);

【参考方案3】：

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

【讨论】：

您如何衡量您所说的这些时间范围？