jQuery延遲不適用於mouseout

Question

有人可以解釋爲什麼這不起作用嗎？

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

我沒有得到任何延遲。只要鼠標一下，BOOM就會消失。

謝謝，我已經嘗試了一些東西，所以只是沮喪。

Answer 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/

---

EDIT（一個側面說明）：

對我們來說會更好e的mouseenter & mouseleave方法而不是mouseovermouseout方法傾向於導致鼠標懸停期間快速閃爍的影響。

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

你完全相同的兩個功能insterted到這裏.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/