停止和恢复 Jquery 动画

Question

我使用了以下代码：

$('#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

Answer 1

尝试使用jQuery clearQueue:

您可以找到更多详细信息：http://api.jquery.com/clearQueue/

更新

好的，试试这个：它工作正常。动画自动更新时长。

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

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> 
 
<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>

Answer 2

我得到了我想要的...

$( document ).ready(function() {
  myDiv = $( "#counter" );
  totalCount = parseInt(myDiv.text());
  animDuration = 30000;
  counter();
  
  $( "#start" ).click(function() {
   counter();
  });
   
  $( "#stop" ).click(function() {
   animDuration = parseInt(myDiv.text()) * 1000;
   myDiv.clearQueue();
   myDiv.stop();
  });
 });
 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> 
 
 <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>

停止和恢复 Jquery 动画

Stop and Resume Jquery Animation

jquery

jquery-ui

jquery-animate