停止和恢复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的动画

回答

相关问题