停止和重新啓動CSS3動畫

我有一個CSS3動畫隨機推擠，當我點擊「播放」。問題是，當我點擊「停止」時，我一直無法停止推動，這是我需要完成的。停止和重新啓動CSS3動畫

我試圖同時使用「-webkit-animation-play-state」和jquery .stop（）函數，但無濟於事。我覺得我很接近，但看起來似乎不太可能得到這個。

我創建了一個jsfiddle，代碼如下。

在此先感謝！

<html> 
<head> 
<style> 
#sec { 
    background: url(http://placekitten.com/200/200); 
    background-repeat:no-repeat; 
    z-index: 3; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    top: 45px; 
    left: 105px; 
} 
</style> 
<script> 
$(document).ready(function(){ 
    $("#play-bt").click(function(){ 
     setInterval(function() { 
     var seconds = Math.random() * -20; 
     var sdegree = seconds * 2 ; 
     var num = -30; 
     var together = num + sdegree; 
     var srotate = "rotate(" + together + "deg)"; 
     $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); 
     }, 100); 
     }); 

    $("#stop-bt").click(function(){ 
      $("#sec").stop(stopAll); 
     }) 

}) 
</script> 
</head> 
<body> 
<div id="sec"></div> 
<br/> 
<div id="play-bt">Play</div> 
<br/> 
<div id="stop-bt">Stop</div> 
</body 
</html>

來源

2012-07-04 Johan

這兩個解決方案都創建並使用全局變量。我的解決方案的優點是全局變量是布爾類型，而Sam的答案使用函數作爲其全局類型。有些事情要考慮，但當然，兩者都可以。 – frenchie

@frenchie - 你的答案存在嚴重問題。你永遠不會停止你的代碼的時間間隔，你只是阻止它做任何事情。這意味着每次你點擊'開始'按鈕，你就會產生一個新的動畫「線程」。此外，單擊開始按鈕將激活所有正在運行的線程，如果您反覆停止/重新啓動，將導致頁面嚴重減速。 –

@frenchie - 同樣，在我的回答中，我存儲了一個數字，而不是一個函數。 –

其用來阻止它是clearInterval()的setInterval()的對應物。每次撥打setInterval()時都會返回一個間隔ID，您可以將其傳遞給clearInterval()以停止它。

因此，您需要存儲setInterval()的結果，並在點擊stop btn時將其清除。

$(document).ready(function(){ 
    var animation = null; 
    $("#play-bt").click(function(){ 
     if (animation !== null) {  // Add this if statement to prevent 
     return;      // doubled animations 
     } 
     animation = setInterval(function() { 
     var seconds = Math.random() * -20; 
     var sdegree = seconds * 2 ; 
     var num = -30; 
     var together = num + sdegree; 
     var srotate = "rotate(" + together + "deg)"; 
     $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); 
     }, 100); 
     }); 

    $("#stop-bt").click(function(){ 
      //$("#sec").stop(stopAll); 
     if (animation !== null) { 
      clearInterval(animation); 
      animation = null; 
     }   
    }); 

});

來源

2012-07-04 01:19:13

完美！你是一個拯救生命的人。 – Johan

停止和重新啓動CSS3動畫

回答

相關問題