2013-02-12 97 views
0

我使用下面的代碼來生成工具提示框。當用戶懸停在指定的跨度上時,該框會切換。這個標誌是我在頁面上有20或30個,所以如果用戶將鼠標放在列表中,我會看到所有30個按順序出現並消失。如果有另一個工具提示目前可見或正在進行動畫處理,有什麼辦法可以阻止效果運行?如何停止同時執行兩個懸停效果?

$('td.aO .tTCont').hover(function(){ 
    $(this).siblings('div.toolTip').delay(100).fadeToggle('200');}) 
+0

考慮一下,我可以對懸停功能的'onMouseOut'部分做回調以隱藏所有工具提示嗎?那可能嗎? – Kev 2013-02-12 09:49:29

回答

1

您可以.stop()停止當前的動畫,並刪除所有排隊的/有.clearQueue()掛起動畫。

在爲另一個動畫定製動畫之前,爲它們調用(其中一個)它們會起到訣竅的作用。

您可能需要與他們一起玩,才能找到一個看起來沒問題的配置。 :)

+0

因此,需要如下所示: '$('td.aO .tTCont')。hover(function(){' '$(' td.aO .tTCont ')停止();'' $(本).siblings(' div.toolTip 200' ) ')延遲(100).fadeToggle(';})' – Kev 2013-02-12 09:37:16

+0

確保也搭上仍然以.stop()方式出現的那些只會刪除當前正在執行的那個。 – 2013-02-12 09:41:51

+0

謝謝,以後有點打在這裏就是我與去: '$( 'td.aO .tTCont')懸停( \t \t \t功能(){ \t \t \t \t $(本)。兄弟姐妹( 'div.toolTip')淡入( '200'); \t \t \t}, \t \t \t函數(){ \t \t \t \t $( 'div.toolTip')clearQueue()停止(。 ).css('display','none'); \t \t \t})' – Kev 2013-02-12 10:23:10

0

試試這個代碼:

$('td.aO .tTCont').hover(function(){ 
    $(this).children('.toolTip').delay(100).fadeToggle('200');}) 
+0

感謝您的建議,但是停止了完全顯示的工具提示... – Kev 2013-02-12 09:36:26