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

Question

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 1

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.