停止和恢復jQuery的動畫

我用下面的代碼：停止和恢復jQuery的動畫

$('#counter').each(function() { 
    var $this = $(this); 
    jQuery({ 
     Counter: 0 
    }).animate({ 
     Counter: $this.text() 
    }, { 
     duration:30000, 
     easing: 'swing', 
     step: function() { 
      $this.text(Math.ceil(30 - this.Counter)); 
     }, 
     complete: function() { 
      $("#count_block").css("display","inline-block"); 
      $this.text(0); 
     } 
    }); 
});

我有我的網頁上Pause和Resume按鈕。如何暫停或恢復我開始使用上述代碼的動畫？

fiddle here

來源

2015-10-14 Hasmukh Mistry

嘗試添加小提琴....最小可能的代碼 –

請檢查這個http://jsfiddle.net/hasmukhmistry/sztkso3y/ –

我已經編輯我的答案，pl輕鬆嘗試一下。 –

嘗試使用jQuery clearQueue：

你可以找到更多的細節：http://api.jquery.com/clearQueue/

UPDATE

好試試這個：它的正常工作。動畫會自動更新持續時間。

$(document).ready(function() { 
 
    myDiv = $("#counter"); 
 
\t totalCount = parseInt(myDiv.text()); 
 
\t animDuration = 30000; 
 
\t counter(); 
 
\t \t 
 
\t $("#start").click(function() { 
 
\t \t counter(); 
 
\t }); 
 
\t \t 
 
\t $("#stop").click(function() { 
 
\t \t animDuration = parseInt(myDiv.text()) * 1000; 
 
\t \t myDiv.clearQueue(); 
 
\t \t myDiv.stop(); 
 
\t }); 
 
}); 
 

 
function counter(){ 
 
    $('#counter').each(function() { 
 
     var $this = $(this); 
 
     jQuery(this).animate({ Counter: totalCount}, { 
 
      duration:animDuration, 
 
      easing: 'swing', 
 
      step: function() { 
 
       $this.text(Math.ceil(30 - this.Counter)); 
 
      }, 
 
      complete: function() { 
 
       $("#count_block").css("display","inline-block"); 
 
        $this.text(0); 
 
      } 
 
     }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter" style="float:left;background:#13AD2A;color:#fff;font-size:32px;padding:30px;display:inline-block;width:40px;text-align:center"> 
 
    30 
 
</div> 
 

 
<div id="count_block" style="display:none;float:left;background:#13AD2A;color:#fff;padding: 13px 10px;margin: 8px 0px 8px 10px;font-size: 14px;line-height: 15px;"> 
 
    Counter Completed 
 
</div> \t 
 
\t 
 
<div id="counter1" style="float:left;background:#13AD2A;color:#fff;padding:39px;display:inline-block;margin-left:20px"> 
 
    <a href="javascript:void(0);" style="color:#fff;" id="stop">Pause</a> | <a href="javascript:void(0);" style="color:#fff;" id="start">Play</a> 
 
</div>

來源

2015-10-14 08:27:07

我試圖清除隊列，並停止在同一頁面上的其他動畫..但使用clearqueue我不能夠停止這個動畫我提到...你能找到這裏的小提琴http://jsfiddle.net/hasmukhmistry/sztkso3y/，並試圖找出一種方法如何制止這一點...非常感謝 –

它的作品像一個冠軍，輝煌......我嘗試使用許多插件來做到這一點，但都沒有針對確切的要求，而我做了這個自定義代碼，但在這個..卡住了..你幫了我很多.. –

非常感謝......我真的很喜歡你解決它的方式。 –

我正是我想要得到...

$(document).ready(function() { 
 
\t \t myDiv = $("#counter"); 
 
\t \t totalCount = parseInt(myDiv.text()); 
 
\t \t animDuration = 30000; 
 
\t \t counter(); 
 
\t \t 
 
\t \t $("#start").click(function() { 
 
\t \t \t counter(); 
 
\t \t }); 
 
\t \t 
 
\t \t $("#stop").click(function() { 
 
\t \t \t animDuration = parseInt(myDiv.text()) * 1000; 
 
\t \t \t myDiv.clearQueue(); 
 
\t \t \t myDiv.stop(); 
 
\t \t }); 
 
\t }); 
 
\t function counter(){ 
 
\t \t $('#counter').each(function() { 
 
\t \t \t var $this = $(this); 
 
\t \t \t jQuery(this).animate({ Counter: totalCount}, { 
 
\t \t \t \t duration:animDuration, 
 
\t \t \t \t easing: 'swing', 
 
\t \t \t \t step: function() { 
 
\t \t \t \t \t $this.text(Math.ceil(30 - this.Counter)); 
 
\t \t \t \t }, 
 
\t \t \t \t complete: function() { 
 
\t \t \t \t \t $("#count_block").css("display","inline-block"); 
 
\t \t \t \t \t $this.text(0); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter" style="float:left;background:#13AD2A;color:#fff;font-size:32px;padding:30px;display:inline-block;width:40px;text-align:center"> 
 
    30 
 
</div> 
 

 
<div id="count_block" style="display:none;float:left;background:#13AD2A;color:#fff;padding: 13px 10px;margin: 8px 0px 8px 10px;font-size: 14px;line-height: 15px;"> 
 
    Counter Completed 
 
</div> \t 
 
\t 
 
<div id="counter1" style="float:left;background:#13AD2A;color:#fff;padding:39px;display:inline-block;margin-left:20px"> 
 
<a href="javascript:void(0);" style="color:#fff;" id="stop">Pause</a> | <a href="javascript:void(0);" style="color:#fff;" id="start">Play</a> 
 
</div>

來源

2015-10-14 13:21:51

這是P. Frank的回答。 – krlzlx

停止和恢復jQuery的動畫

回答

相關問題