November 11, 2012
Adding easing to the following jQuery animation?
Question by alexchenco
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 by Starx
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'
});
});
