jQuery animate() with duration, easing and complete function

Description

jQuery animate() with duration, easing and complete function

View in separate window 

 Code:
 <!DOCTYPE html>
 <html>
 <head>
 <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
 </script>//w ww.  j a  v  a  2s  . c o  m
 <script>
 $(document).ready(function(){
   $("#btn").click(function(){
     $("#box").animate({
       height: "300px",
       width: "300px"
     }, {
       duration: 5000,
       easing: "linear",
       complete: function(){
       $(this).after("<p>Animation is complete!</p>");
       }
     });
   });
 });
 </script>
 </head>
 <body>
           
 <button id="btn">Animate height & width</button>
           
 <div id="box" style="background:red;height:100px;width:100px;margin:6px;"></div>
           
 </body>
 </html>



PreviousNext

Related