jQuery: easing with the Easing plugin

jQuery's easing is part of the animation process of an element. In the animate() method, it can be specified after the duration of the animation, just before the callback method (if any). jQuery natively supports only two types of easing effects, namely swing and linear but these effects can be augmented if we use the Easing plugin which supports up to 31 easing options. Let's see an example.

$(function() {

var index = -1;

var interval = setInterval(function() {

  index++;
  
  if(index == 3) {
  
    clearInterval(interval);  
  
  }
  
  var slide = $('div.slide', '#slide-wrapper').eq(index);
  
  slide.animate({
    height: 250,
    width:  250,
    lineHeight: '250px'
  }, 2000, 'easeOutBounce');




}, 2000);
 

});

In this example, we use the easeOutBounce easing option that, as its name says, creates a bouncing effect on the animation. You can see a demo below.

Demo

Live demo