Adding easing to the following jQuery animation?

Question

I'm animating the height of element:

  // Animate height of items
  $j(".item .row").toggle(function(){
    $j(this).animate({height:500},200);
  },function(){
    $j(this).animate({height:300},200);
  });

I was wondering how to add easing to it? (e.g. the animation slowing down towards the end?)

Answer 1

Define easing, the following way

$('selector').animate({
    prop:1
},{
    easing: easing, //Something like 'linear'
    duration: duration,
    complete: callback
});

You can add other easing effects also, by including the Easing Plugin.

In your case, it would be something like

$j(".item .row").toggle(function(){
    $j(this).animate({height:500}, {
        easing: 'linear',
        duration: '200'
    });
  },function(){
    $j(this).animate({height:300},{
        easing: 'linear',
        duration: '200'
    });
});