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