1

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?

Community
  • 1
  • 1
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
  • Use `JqueryUI`: https://jqueryui.com/easing/ – smalinux Sep 24 '16 at 04:53
  • @SohaibMohammed Not sure if I missed something, but I checked its API documentation and didn't found the equivalence of CSS “ease”. – Ian Y. Sep 24 '16 at 04:58
  • Well! there are too may jquery libraries can make this! google theme. – smalinux Sep 24 '16 at 05:03
  • I usually use GreenSock in animation and easing: http://greensock.com/ease-visualizer – smalinux Sep 24 '16 at 05:05
  • _"What I want to do is defining a custom easing function called "ease" with code like this:"_ What have you tried? What issue are you having? – guest271314 Sep 24 '16 at 05:42
  • @guest271314 I had tried searching for a converting tool which converts cubic-bezier into jQuery equivalence, and had no luck. My issue is that I don't know how to write the custom jQuery easing function. – Ian Y. Sep 24 '16 at 06:11
  • What `javascript` have you tried to resolve Question? – guest271314 Sep 24 '16 at 06:17
  • @guest271314 None because my current javascript skill level is not high enough to write such mathematical functions. – Ian Y. Sep 24 '16 at 06:26
  • See https://drafts.csswg.org/css-transitions/#funcdef-transition-timing-function-cubic-bezier – guest271314 Sep 24 '16 at 06:34

1 Answers1

0

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]).

Ian Y.
  • 2,293
  • 6
  • 39
  • 55