在前端開發(fā)中用的較多的是jquery,之前遇到一個問題,一個下拉的jquery下拉菜單效果,hover上去,一直閃動,用mouseovermouseout好好的,當(dāng)時沒搞定,今天逛論壇看到一個方法,可以行.只怪自己之前看jquery api的時候不是很仔細(xì)。

解決閃動 可以使用Stop()

stop([clearQueue],[jumpToEnd])

概述

停止所有在指定元素上正在運(yùn)行的動畫。

如果隊(duì)列中有等待執(zhí)行的動畫(并且clearQueue沒有設(shè)為true)，他們將被馬上執(zhí)行

參數(shù)

[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果設(shè)置成true，則清空隊(duì)列。可以立即結(jié)束動畫。

gotoEnd: 讓當(dāng)前正在執(zhí)行的動畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。

[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用來停止動畫的隊(duì)列名稱

clearQueue: 如果設(shè)置成true，則清空隊(duì)列。可以立即結(jié)束動畫。

jumpToEnd: 如果設(shè)置成true，則完成隊(duì)列。可以立即完成動畫。

當(dāng)鼠標(biāo)移上去的時候就菜單下拉，當(dāng)鼠標(biāo)離開的時候菜單上卷，下拉和上卷的動畫時間都是5秒種。

$("#menu").hover(     function () {       $("#menu").animate({ height: "500" }, 5000);     },     function () {       $("#menu").animate({ height: "100" }, 5000);     } );

如果我快速不斷地將鼠標(biāo)移入移出菜單（即，當(dāng)菜單下拉動畫未完成時，鼠標(biāo)又移出了菜單）就會產(chǎn)生“動畫積累”，當(dāng)鼠標(biāo)停止移動后，積累的動畫還會持續(xù)執(zhí)行，直到動畫序列執(zhí)行完畢。這樣導(dǎo)致動畫效果與鼠標(biāo)動作不一致。

要解決此問題只需要在移入移出動畫之前加入stop()，結(jié)束當(dāng)前動畫進(jìn)入下個動畫即可。

代碼如下：

$("#menu").hover(     function () {       $("#menu").stop().animate({ height: "500" }, 5000);     },     function () {       $("#menu").stop().animate({ height: "100" }, 5000);     } );

如果需到組合動畫，在移入移出動畫之前加入stop()來停止當(dāng)前動畫，如下

$("#menu").hover(     function () {       $("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000);     },     function () {       $("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000);     } );

效果并不好，因?yàn)閟top()只是停止了當(dāng)前第一步的動畫（即{height:”500″}），然后又進(jìn)入了第二步的動畫（即[width:”500″}）。

此時stop()的第一個參數(shù)就派上了用場，它會把下面沒有執(zhí)行的動畫序列都清空掉。

$("#menu").hover(     function () {       $("#menu").stop(true).animate({ height: "500" }, 5000).animate({ width: "500px" }, 5000);     },     function () {       $("#menu").stop(true).animate({ height: "100" }, 5000).animate({ width: "100px" },5000);     } );

當(dāng)然也可以使用第二個參數(shù)，讓動畫達(dá)到最后狀態(tài)。如：stop(false,true)

以上這篇jquery hover 不停閃動問題的解決方法(亦為stop()的使用)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。