How to – Create Animations Using jQuery’s .animate() Method

jQuery's .animate() method can be used for creating some good looking animations on your web sites. Animations are very important when creating interactive and ajax enabled sites/applications.

This is the pseudo code for .animate() method:
.animate( properties [, duration] [, easing] [, complete] )

Terminology:

  • properties: Set of properties that the animation will manipulate.
  • duration: Duration of the animation.
  • easing: Indicates which easing function to use during the transition of the properties.
  • complete: Function that is called when the animation is completed.
Sample Usage: (without easing)
$('#clickme').click(function() {
  $('#mydiv').animate({ 
      opacity: 0.25, 
      left: '+=50', 
      height: '200' }, 500, function() { 
            $('#clickme').after('<b> completed!</b>'); 
  }); 
});
See the working code here.
Sample Usage: (with easing)
Your animations will look better with easing, but you will need to add easing library.
$('#clickme').click(function() {
  $('#mydiv').animate({ 
      opacity: 0.25, 
      left: '+=50', 
      height: '200' }, 500,'linear', function() { 
            $('#clickme').after('<b> completed!</b>'); 
  }); 
});
See the working code here.
Sample Usage: (without 'complete' function)
If you don't have a task to run after animation completion the you don't need extra lines of code.
$('#clickme').click(function() {
  $('#mydiv').animate({ 
      opacity: 0.25, 
      left: '+=50', 
      height: '200' }, 500); 
});

See the working code here.

Hope this helps someone.

Good luck,
Serdar.

Leave a Reply

Your email address will not be published. Required fields are marked *