Customize Easing in Jquery

Question

So I have an issue with the documentation for easing. I have looked in the code and have found something that I would like to customize but currently have no knowledge on how to. Here is the function I am calling:

$('.caption').show('scale', { percent: 100, easing: 'customEasing' }, 500);

I looked at the easing function and saw this

    easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;}

Not only does it have a bunch of variables to pass in but it also checks if one of them, s, is undefined. I want to pass in a different value for s but i just don't see how? Does anyone have a broader understanding of the jquery ui and easing and can tell me if there is a way to change that setting without creating a whole customized effect?

Answer 1

The syntax is strange, this is not how jQuery easing and show functions work.

Easing function accepts 5 parameters (not 6):

1. The percentage of how much time has passed in the animation, from 0 to 1.
2. The number of milliseconds since the start of the animation.
3. The start value of the first parameter (always 0)
4. The end of value of the first parameter, always 1.
5. How long the animation will run in milliseconds.

jQuery passes these values automatically. Animation always runs from 0 to 1. The shape of the animation depends only on the formula, and not on any of the parameters. If you want a different shape you'll have to define your own easing function.

Here's an example of how to define and use a custom easing function: http://jsfiddle.net/4ZzWZ/