如何暫停所有jQuery動畫？

Question

我會遇到需要暫停頁面上的所有動畫以便進行一些用戶交互的情況，然後在用戶響應後立即恢復所有動畫。

例如，我可能會有一個動畫在1秒內消失，並且需要暫停400ms。它應該停止在40％的不透明度，並留在那裏，直到我恢復，此時它應該從停止的位置拿起，並且花費另外600毫秒從40％到100％完成其淡入。

頁面上可能同時存在多個動畫，我想暫停所有動畫。此外，一些動畫可能會有更多的動畫在完成後排隊等待繼續，並且所有需要工作：當我恢復時，當前動畫需要完成，然後隊列中的下一個動畫需要啓動，就像沒有任何事情發生一樣。

jQuery似乎沒有任何對暫停動畫的內置支持;我能找到的最接近的是.stop()，它將停止在動畫中的當前位置，但不能稍後恢復;並且它立即移動到隊列中的下一個動畫，或者完全清除動畫隊列。

如何以暫停動畫的方式讓我稍後恢復動畫？

Answer 1

暫停/恢復選項

的pause plugin會出現這種情況運行良好。

HTML

<div class=demo> 
    <div id="box1" class="animationToPause"></div> 
    <div id="box2" class="animationToPause"></div> 
    <div id="box3" class="animationToPause"></div> 
</div> 
<input id="btnPause" type="button" value="Pause Animations" /> 

CSS

div.demo { 
    border: 1px solid #555; 
    margin: 1em auto; 
    width: 550px; 
} 
#box1, #box2, #box3 { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#box1 { 
    background: #0C0; 
} 
#box2 { 
    background: #090; 
} 
#box3 { 
    background: #060; 
}​ 

的JavaScript

$(function() { 
    //Begin animation on boxes 
    $("div[id^='box']").each(function() { 
     phase1($(this)); 
    }); 

    //Setup animation pause/resume on hover 
    $("div[id^='box']").hover(function() { 
     $(this).pause(); 
    }, function() { 
     $(this).resume(); 
    }); 
}); 

//Toggle animation pause/resume on button click 
$("#btnPause").toggle(
    function() { 
     $(".animationToPause").pause(); 
    }, function() { 
     $(".animationToPause").resume() 
}); 

//Animation 1 
function phase1($this) { 
    $this.animate({ 
     left: 450 
    }, 2000, 'swing', function() { 
     phase2($this) 
    }); 
} 

//Animation 2 
function phase2($this) { 
    $this.animate({ 
     left: 0 
    }, 2000, 'swing', function() { 
     phase1($this) 
    }); 
}​ 

這裏的a working fiddle to demonstrate。

蠻力選項

當然，你正在尋找沒有什麼，但相關的。

設置jQuery.fx.off = true;將立即停止所有動畫。