CODEWITHSUNDEEP
jquery
Anish
Anish

Reputation: 912

How to change Jquery animate duration during transition?

How i can change the duration of jquery animate method such that.. the animation starts slowly, then speeds up and then again slowly and ending?

Thanks

Upvotes: 1

Views: 685

Answers (2)

Jasper
Jasper

Reputation: 76003

There is an easing plugin for jQuery: http://gsgd.co.uk/sandbox/jquery/easing/

It's got like 30 different easing types.

You can also use several together like this:

$('#my-ele').animate({ left : 100 }, 500, 'easeInExpo', function () {
    $(this).animate({ left : 500 }, 500, 'linear', function () {
        $(this).animate({ left : 600 }, 500, 'EaseOutExpo');
    });
});

This uses the callback function of the .animate() function to create a three part animation that eases in, then animates linearly, then eases out.

Here is a demo: http://jsfiddle.net/pPzhY/ (Another demo I made a while ago that looks pretty good: http://jsfiddle.net/b6L8M/22/)

Upvotes: 1

user1106925
user1106925

Reputation:

You can include jQueryUI, which has various easing options for animations.

http://jqueryui.com/demos/effect/#easing

For example:

DEMO: http://jsfiddle.net/f77BA/

$('div').animate(
    {'height':400},
    {easing:'easeInOutCubic',duration:2000});​

I should note that you don't need the entire jQueryUI download. Their download page lets you customize the download, so I'm pretty sure you could just include the Core to get the easing effects.

Upvotes: 2

Related Questions