CODEWITHSUNDEEP
jqueryjquery-uijquery-animate
Hasmukh Mistry
Hasmukh Mistry

Reputation: 139

Stop and Resume Jquery Animation

I have used following code:

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

I have a Pause and Resume button on my webpage. How can I pause or resume the animation that I started using above code?

fiddle here

Upvotes: 0

Views: 819

Answers (2)

P. Frank
P. Frank

Reputation: 5745

Try to use jQuery clearQueue:

You can find more details: http://api.jquery.com/clearQueue/

UPDATE

Ok try this: it's working fine. The animation auto update the duration.

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

Upvotes: 3

Hasmukh Mistry
Hasmukh Mistry

Reputation: 139

I got exactly what i want ... 

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

Upvotes: 0

Related Questions