jquery animation effects

the jquery offers the animate method for building your own effects.

the jquery animate() method use for animation effects

the jquery animate() method performs a custom animation of a set of css properties.

the jquery offers the animate method for building your own effects.

        $(selector).animate( params, speed, callback);

params:-a map of css properties that the animation will move toward.

speed :-this is optional parameter representing how long the animation will run.

callback :- a function to call once the animation is complete.

jquery animate method example - how animate using jquery

<html>  
                   
                   <head>
  
  <title>to look the animate() method effect,click on the animate button.
  
  </title>
  
  <style type="text/css">
  
  #box{background:gold repeat url('./background-image.jpg');
  
  width:150px;height:90px;  </style> 
   
   
  <script
  
  src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
  
  </script>
  
  <script>
  
                   $(document).ready(function(){
                   
                   $(".animate").click(function(){
                   
                   $("div#box").animate({width:"450px",height:"210px"});
                   
                   });
                  
                  });
  
  </script>
  
   </head>
   
 <body>
       
       <div  id="box">
       
<p>the animate() method performs a animation of a  set of css properties.

       </div>

       <button class="animate"> animate <button>
       
  </body>
  
 </html>                  

 

Jquery animate method with callback argument

in the below example how work the callback argument in the animate method

   <html>
  
    <head>
 
 <title>to look the animate effect with callback parameter,click on the
 
  animate button.</title>
 
   <style type="text/css">

 #box{background: gold repeat url('./b-image.jif');width:100px;height:40px;
  
 </style> 
   
     
   <script
                   
  src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
        
    </script>
                   
    <script>
                   
            $(document).ready(function(){
                   
            $(".animate").click(function(){
                   
            $("div#box").animate({width:"450px",height:"210px"},1000,
            
 function(){alert("the animate() method execution is complete.");});
                   
            });
                   
            $(".reset").click(function(){
                   
            $("div#box").animate({width:"100px",height:"40px"});
                   
            });                  
              
    </script>
                   
   </head>
             
 <body>
                   
   <div  id="box">
                
   <p>the animate() method performs a animation of a  set of css properties.
                   
   </div>
                   
   <button class="animate">  animate  <button>
                   
   <button class="reset"> resetanimate <button>
                   
</body>
          
</html>