jQuery延迟不适用于mouseout

Posted 2023-05-08

【中文标题】jQuery延迟不适用于mouseout

【英文标题】：jQuery delay not working on mouseout

【发布时间】：2011-12-19 05:23:45

【问题描述】：

有人可以解释为什么这不起作用吗？

jQuery('.right-et-tooltip').delay(800).mouseout(function()
        jQuery(this).find('.right-et-tooltip-box').animate( opacity: 'hide', left: '-100px' , 30);
);

我一点也不耽误。鼠标一出，BOOM就消失了。

谢谢，我已经尝试了一些东西，所以很沮丧。

【问题讨论】：

能否也提供html。我建议你把它扔到 jsfiddle.net 上

哦，但根本无法让它在那里工作......缺少一些东西......虽然不知道是什么

您犯了一个简单的错误，将delay() 绑定到jQuery 选择器而不是mouseout 函数。请参阅下面的答案。

【参考方案1】：

您的延迟完全没有做任何事情，因为它绑定到 jQuery 选择器而不是 mouseout 处理程序中的函数。

试试这个吧……

jQuery('.right-et-tooltip').mouseout(function()
        jQuery(this).find('.right-et-tooltip-box').delay(800).animate( opacity: 'hide', left: '-100px' , 30);
);

您的 jsFiddle 应用了更正...

http://jsfiddle.net/zGtBN/2/

---

编辑（附注）：

使用mouseenter 和mouseleave 方法比使用mouseover 和mouseout 方法要好得多，后者往往会在鼠标悬停时导致快速闪烁效果。

Then you can simply combine the mouseenter and mouseleave handlers into one by using the jQuery .hover() method.

您的完全相同的两个函数在此处插入到 .hover() 方法中...

http://jsfiddle.net/zGtBN/3/

---

编辑 2：

当您在离开动画完成之前重新进入时，动画将排队。如果您多次快速进出，所有这些动画都会在它们停止之前闪烁开/关。

为了防止动画队列堆积并创建一个新的问题，因为mouseleave 延迟，use a jQuery .stop(true, false) 在 mouseenter 函数上像这样...

jQuery(this).find('.right-et-tooltip-box').stop(true,false).animate( opacity: 'show', left: '-100px' , 30);

在mouseenter 上，它会立即停止任何mouseleave 动画。 “clearQueue”选项上的true 清除动画队列，“jumpToEnd”选项上的false 表示停止当前动画而不是立即完成。

修改后的演示...

http://jsfiddle.net/zGtBN/4/

【讨论】：

工作得很好，我对 mouseenter 和 mouseleave 进行了更改，它仍然闪烁但它又回来了...我相信我会找到一种方法让它不这样做。它这样做是因为我确实“离开”了，所以它在闪烁时开始延迟，然后重新显示。

@oneadvent：这是一个不同的问题。这是因为动画在动画完成之前进入和离开时正在排队。使用 jQuery 的 .stop() 方法停止动画并清除队列。请参阅我对演示的最新编辑。