【问题标题】:Is there a way to cancel jQuery's hover event while it is happening?有没有办法在它发生时取消 jQuery 的悬停事件?
【发布时间】:2011-10-31 15:53:54
【问题描述】:
我正在使用 jQuery 悬停事件使元素“发光”(不透明度从 0.7 变为 1),然后在鼠标离开时“发光”。这很好,除非您不小心将鼠标悬停在元素上几次或多次。然后,元素将开始闪烁(“发光”和“不发光”)的次数与鼠标经过的次数一样多。
这不仅丑陋,而且还意味着任何其他需要运行的 jQuery .animate() 事件必须等到这些连续的闪烁完成。一个例子可以在这里找到:http://www.rootsoftllc.com/accounts/
有没有办法告诉 jQuery 悬停事件它只能运行一次,然后它必须等到它完成之后才能运行,除了更多的鼠标事件?
【问题讨论】:
标签:
jquery
stack
hover
jquery-animate
opacity
【解决方案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() 提前停止动画,然后将动画快速返回到它应该在的位置。