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?

Solution

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

[Ernests Karlsons]

That is a solution i thought about, too, but the problem is that for longer and smoother animations it's difficult to fit an easing function on both ends — there's always a bit of a wobble on the "connection points". Is there an easing-in function graph that ends in a 45 degree line, while starts horizontally?

[Jasper]

@ErnestsKarlsons Here are some graphs of the different easing types: jqueryui.com/demos/effect/easing.html

[Ernests Karlsons]

Stupid, just needed to look them up. For some reason i was sure that there is nothing suitable. Sorry and thanks for a fast answer!