停止和恢复 Jquery 动画答案

【问题标题】：Stop and Resume Jquery Animation停止和恢复 Jquery 动画
【发布时间】：2015-10-14 08:18:04
【问题描述】：

我使用了以下代码：

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

【问题讨论】：

尝试添加小提琴....尽可能少的代码
请查看jsfiddle.net/hasmukhmistry/sztkso3y
我已经编辑了我的答案，请尝试一下。
@HasmukhMistry: jsfiddle.net/tahirahmed/d0bsce1p

标签： jquery jquery-ui jquery-animate

【解决方案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>

【讨论】：

我尝试了清除队列，并在同一页面上停止了另一个动画.. 但是使用 clearqueue 我无法停止我提到的这个动画......你能在这里寻找小提琴jsfiddle.net/hasmukhmistry/sztkso3y并尝试找出一种方法来阻止这种情况...非常感谢
它的工作原理就像一个冠军，Brilliant ...我尝试使用许多插件来做到这一点，但都未能达到确切的要求，我做了这个自定义代码但卡在这个......你帮了我一个很多..

【解决方案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>

【讨论】：

这是 P. Frank 的回答。