Stop and Resume Jquery Animation

414
November 22, 2016, at 12:51 PM

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

Answer 1

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>

Answer 2

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>

Rent Charter Buses Company
READ ALSO
Multi-knob with jquery - Square canvas

Multi-knob with jquery - Square canvas

I have a problem with jQuery Knob when I use multi-knob. .

396
Javascript fake click which triggers affiliate pop-up is being blocked

Javascript fake click which triggers affiliate pop-up is being blocked

My page has an affiliate pop-up whenever someone clicks anywhere on the page. This part works fine.

302
Inject form request from modal to another html

Inject form request from modal to another html

Im making a simple example using Bootstrap and JQuery. I have next code html:.

355
Show a menu item after site fully loaded

Show a menu item after site fully loaded

I need to show a change language menu item after my Wordpress site is fully loaded. I edited the menu item css into my menu item:.

280