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

解決閃動(dòng) 可以使用Stop()

stop([clearQueue],[jumpToEnd])

概述

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

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

參數(shù)

[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果設(shè)置成true，則清空隊(duì)列?？梢粤⒓唇Y(jié)束動(dòng)畫。

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

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

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

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

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

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

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

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

代碼如下：

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

如果需到組合動(dòng)畫，在移入移出動(dòng)畫之前加入stop()來停止當(dāng)前動(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)前第一步的動(dòng)畫（即{height:”500″}），然后又進(jìn)入了第二步的動(dòng)畫（即[width:”500″}）。

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

$("#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)然也可以使用第二個(gè)參數(shù)，讓動(dòng)畫達(dá)到最后狀態(tài)。如：stop(false,true)

以上這篇jquery hover 不停閃動(dòng)問題的解決方法(亦為stop()的使用)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論