jquery stop animation

the jquery stop() method is used to stop animation or effects before it is complete.

jquery stop() method

the jquery stop() method is used to stop the currently-running animation on the matched elements.

the stop() method works for all jquery effect functions, including sliding, fading and custom animations.

jquery stop (animation) method syntax :-

           $( selector ).stop(  clearall,    jumptoend );
  • clearall :- this is optional boolean parameter.when set to true clears the animation queue, effectively stopping all queued animation.
  • jumptoend :- a boolean value indicating whether to complete the current animation immediately.default to false.

jquery stop (animation) method example :

how stop the currently-running animation on element.

<html>  
                   
           <head>
           
        <title>how stop the currently-running animation </title>
                   
 <style type="text/css">

 #box{background:gold repeat url('/bg.jif');width:130px;height:65px;}
                   
   </style>                  
              
   <script
                   
 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
                   
                   </script>
                   
      <script>
      
                   $(document).ready(function(){
                   
                   $(".animation").click(function(){
                   
                   $("div#box").animate({width:"454px",height:"211px"},3020);
                   
                   $("div#box").animate({width:"153px",height:"42px"},3030);
                   
                   });
                   
                   $(".stop").click(function(){
                   
                   $("div#box").stop();
                   
                   });                  
     </script>
                   
        </head>
                   
       <body>
                   
         <div  id="box">  </div>
         
                   <button class="animation"> animation </button>
                   
                   <button class="stop"> stop-current-animation </button>
                   
       </body>
                   
   </html>

Jquery Stop Method example

<html>  
                   
     <head>
     
   <style type="text/css">
             
 #box{background: gold repeat url('/bg.jpg');width:100px;height:60px;
 
 </style> 
                   
 <script
 
  src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
  
  </script>
                   
  <script>
  
                   $(document).ready(function(){
                   
                   $(".animation").click(function(){
                   
                   $("div#box").animate({width:"120px",height:"110px"},100);
                   
                   $("div#box").animate({width:"220px",height:"150px"},200);
                   
                   $("div#box").animate({width:"450px",height:"210px"},1000);
                   
                   $("div#box").animate({width:"150px",height:"40px"},1000);
                   
                         });
                         
                   $(".stop").click(function(){
                   
                   $("div#box").stop(true);
                   
                   });
                      
  </script>
  
      </head>
      
       <body>
       
          <div  id="box">
          
         </div>
         
   <button class="animation"> animation </button>
   
   <button class="stop"> stop-animation </button>
   
     </body>
     
 </html>