溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在前端開發中用的較多的是jquery,之前遇到一個問題,一個下拉的jquery下拉菜單效果,hover上去,一直閃動,用mouseovermouseout好好的,當時沒搞定,今天逛論壇看到一個方法,可以行.只怪自己之前看jquery api的時候不是很仔細。
解決閃動 可以使用Stop()
stop([clearQueue],[jumpToEnd])
概述
停止所有在指定元素上正在運行的動畫。
如果隊列中有等待執行的動畫(并且clearQueue沒有設為true)，他們將被馬上執行
參數
[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
gotoEnd: 讓當前正在執行的動畫立即完成，并且重設show和hide的原始樣式，調用回調函數等。
[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用來停止動畫的隊列名稱
clearQueue: 如果設置成true，則清空隊列。可以立即結束動畫。
jumpToEnd: 如果設置成true，則完成隊列。可以立即完成動畫。
當鼠標移上去的時候就菜單下拉，當鼠標離開的時候菜單上卷，下拉和上卷的動畫時間都是5秒種。
$("#menu").hover(
function () {
$("#menu").animate({ height: "500" }, 5000);
},
function () {
$("#menu").animate({ height: "100" }, 5000);
}
);
如果我快速不斷地將鼠標移入移出菜單（即，當菜單下拉動畫未完成時，鼠標又移出了菜單）就會產生“動畫積累”，當鼠標停止移動后，積累的動畫還會持續執行，直到動畫序列執行完畢。這樣導致動畫效果與鼠標動作不一致。
要解決此問題只需要在移入移出動畫之前加入stop()，結束當前動畫進入下個動畫即可。
代碼如下：
$("#menu").hover(
function () {
$("#menu").stop().animate({ height: "500" }, 5000);
},
function () {
$("#menu").stop().animate({ height: "100" }, 5000);
}
);
如果需到組合動畫，在移入移出動畫之前加入stop()來停止當前動畫，如下
$("#menu").hover(
function () {
$("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000);
},
function () {
$("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000);
}
);
效果并不好，因為stop()只是停止了當前第一步的動畫（即{height:”500″}），然后又進入了第二步的動畫（即[width:”500″}）。
此時stop()的第一個參數就派上了用場，它會把下面沒有執行的動畫序列都清空掉。
$("#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);
}
);
當然也可以使用第二個參數，讓動畫達到最后狀態。如：stop(false,true)
以上這篇jquery hover 不停閃動問題的解決方法(亦為stop()的使用)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
