jQuery事件mouseover和mouseout當快速移動時事件延遲觸發問題

首先來看一段程式碼：

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("p.p1").mouseover(function()

       {$("p.p2").animate({bottom:&#39;10px&#39;},1000);})

    $("p.p1").mouseout(function()

       {$("p.p2").animate({bottom:&#39;-50px&#39;},1000);}
    )
});</span>

上述的程式碼很簡單，我之所以沒有用hover() 來寫，是因為我想讓程式碼思路更清晰，也更容易理解！它所實現的效果就是將滑鼠放在class為“p1”的p上，class為“p2”的p的bottom值為“10px”，將滑鼠移開，其值將變為“-50”px，就是一個class為p2上下移動的效果，可是當我快速將滑鼠放在class為p1的p上，然後快速移開，以此反覆幾次，然後你會發現那個class為p2的p在那不停的一上一下，此時，我的滑鼠已經沒動了，這個效果很差，事件延遲觸發，然後我就在想，怎麼解決，剛開始，想到使用omouseenter代替了你原來的mouseover，使得第一次觸發事件後，在物件區域反覆移動將不再繼續觸發，然後覺得也可以使用:not(:animated)來判斷當前物件是否正在執行動，還想到了preventDefault();結果都有一一去驗證，去實現，有的出結果了，但效果還是不理想，有的還沒出結果。 。 。 。 。

最後，我想到了jQuery的stop(), 它的作用是停止目前正在運行的動畫，只要將目前正在運行的動畫停下來，然後在實現往上往下移動就好，然後寫下瞭如下程式碼：

<span style="font-family:SimHei;font-size:14px;">$(&#39;p.p1&#39;).hover(
function() {
$("p.p2").stop().animate({bottom:&#39;10px&#39;},1000);})
},
function() {
$("p.p2").stop().animate({bottom:&#39;-50px&#39;},1000);}
}
);</span>

#結果解決了jQuery的mouseover和mouseout事件當快速移動事件延遲觸發問題，而且動畫效果很友好，很讚！

當快速移動事件延遲觸發問題

當快速移動事件延遲觸發問題

#當速移動事件延遲

#

以上是jQuery事件mouseover和mouseout當快速移動時事件延遲觸發問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！