在前端開發中用的較多的是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)
*
