How to create the equivalence of CSS "ease" in jQuery?

Question

According to Ceaser, the detailed CSS code of CSS transition-timing-function ease is cubic-bezier(0.250, 0.100, 0.250, 1.000). That's all I know. How can it be translated it into a jQuery's easing function?

jQuery's $.easing allows us to define custom easing functions. For example, the following code defines a custom easing function called "custom". (Note: The code is borrowed from this thread.)

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

And then it can be used like this: $('#element').animate({ right: 100 }, 500, 'custom').

What I want to do is defining a custom easing function called "ease" with code like this:

$.easing.ease = function (x, t, b, c, d) {
    ......
    ......
    ......
}

How do I do that?

Answer 1

It looks like there is no online converting tool or tutorial for converting cuic-bezier into jQuery equivalence.

But I found a jQuery plugin which can serve the purpose, too. The plugin is Bez.

So in my case, the CSS transition-timing-function ease can be translated into jQuery with Bez as: $.bez([0.250, 0.100, 0.250, 1.000]).