Home  >  jQuery

Example of .clearQueue() in jQuery

April 28, 2013
.clearQueue() is obvious by its name. The functions stored in queue which will execute one by one can be cleared out by .clearQueue(). Lets us understand by example. Find the four function which will execute in queue (first come first serve).
1.	$("div").animate({width:400},4000);
2.	$("div").animate({width:20},4000);
3.	$("div").animate({width:400},4000);
4.	$("div").animate({width:20},4000);
 
All these are defined for the div. If at this div we call .clearQueue(), then only current executing animate function will complete and the rest will stop executing. Find the complete example below.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <style>
div { background:blue;height:50px;width:20px;}
</style>
<button id="run">Click to Start </button>
<button id="stop">Stop to test clearQueue</button>
<div></div>
<script> 
  $("#run").click(function(){
		$("div").animate({width:400},4000);
		$("div").animate({width:20},4000);
		$("div").animate({width:400},4000);
		$("div").animate({width:20},4000); 
   });
  $("#stop").click(function(){
    $("div").clearQueue();
	
  });
</script> 
</head>
<body>
</body>
</html>
 

Output
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us