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

2 个答案: