Ernests Karlsons Ernests Karlsons - 22 days ago 8
jQuery Question

How to make animation easing (ease-in and ease-out) duration-independent?

I'm using jQuery with Easing plugin and i would like to achieve constant easing times for for animations of any duration:

Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
10ms 10ms

Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
10ms 10ms


Where
<<<<
/
>>>>
are easing-in / easing-out periods, and
---
denotes constant velocity movement.

Is there an easing function/plugin for that or should i give a time-dependent custom function for each animation like this and, if yes, then what kind?

Answer

You can use the callback function in the .animate() calls to chain animations:

var $obj     = $('#some-id'),
    ani_dist = 500;

//animate first easing
$obj.stop().animate({ left : 100 }, 500, 'easeOutCirc', function () {

    //animate main body of the animation
    $obj.animate({ left : (ani_dist - 100) }, 1000, 'linear', function () {

        //animate the last easing
        $obj.animate({ left : ani_dist }, 500, 'easeInCirc');
    });
});

I'm not sure what you want to set the animation to animate or what duration to use but there's an idea.

Comments