jQuery延迟不适用于mouseout答案

【问题标题】：jQuery delay not working on mouseoutjQuery延迟不适用于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 函数。请参阅下面的答案。

标签： jquery function jquery-animate delay

【解决方案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() 方法停止动画并清除队列。请参阅我对演示的最新编辑。