第詳解jQuery的animate動畫方法及動畫排隊問題解決如果將開啟運動的程序放在一個事件函數(shù)中，事件多次被觸發(fā)，會執(zhí)行多次函數(shù)，就會在一個元素身上添加了多個動畫，會進行動畫排隊。(動畫積累問題)

需要去清除排隊的動畫，進行防騷擾操作。

解決方法

方法一：利用stop（）方法

在每一個運動函數(shù)之前都增加一個stop（true），表示在運動執(zhí)行之前，會將前面排隊的動畫清空，然后停止在當前位置

style

div{

width:100px;

height:100px;

border:8pxsolid#ccc;

position:absolute;

left:0;

top:0;

background:url(../../imgs/1.jpg)no-repeatcentercenter;

divspan{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background-color:rgba(221,130,130,0.4);

/style

body

inputtype="button"value="truetrue"id="btn1"

inputtype="button"value="truefalse"id="btn2"

inputtype="button"value="falsefalse"id="btn3"

inputtype="button"value="falsetrue"id="btn4"br

divspan/span/div

scriptsrc="../jq/jquery-1.12.4.min.js"/script

script

var$box1=$(".box1");

varduring=2000;

//清空動畫

$box1.mouseenter(function(){

$(this).children().stop(true).slideUp(during)

$box1.mouseleave(function(){

$(this).children().stop(true).slideDown(during)

/script

/body

方法二：利用函數(shù)節(jié)流方法

如果元素在運動，直接return，不要執(zhí)行后面的運動代碼。

每個jQuery對象，都能調(diào)用一個is（）方法，作用是顯示元素對象的某種狀態(tài)

如果參數(shù)位置是is("：animated")，animated是正在運動的意思，返回值是布爾值，true表示正在運動，false表示沒有運動

//函數(shù)節(jié)流方法

$box1.mouseenter(function(){

if(is(":animated")){

//如果判斷是正在運動的話，直接return返回，不再執(zhí)行其他動畫

return;

//沒有運動的話，則繼續(xù)執(zhí)行后面的新動畫

$(this).children().slideup(during);

$box1.mouseenter(function(){

if(is(":animated")){

//如果判斷是正在運動的話，直接return返回，不再執(zhí)行其他動畫

return;

//沒有運動的話，則繼續(xù)執(zhí)行后面的新動畫