Question

我正在使用Robert（http://gsgd.co.uk/sandbox/jquery/easing/）的jQuery缓动插件，我需要强调或拖出缓动效果。

基本上，我希望缓和效果非常快，但在缓和期间会大大减慢。

我相信我可以使用jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)执行此操作，但我无法弄清楚如何正确使用它。

如何实现这一目标？

Answer 1

您不需要使用缓动插件来使用jQuery进行自定义缓动。您只需要要使用的一个缓动函数的源JavaScript代码。

这是从jQuery UI源代码获得的easeOutCubic函数。请参阅this thread for more。

$.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

现在您可以编辑该功能和/或重命名它......

$.easing.myEasing = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

（以下所有示例都使用375像素的蓝色方块，持续时间为slideToggle() 3秒。您可以更改3秒（3000毫秒）的持续时间，以显示您喜欢的效果。选择了3秒钟让它变得足够慢以查看差异。）

然后你把它放在你的jQuery里面，或许这样......

$(document).ready(function(){

        $.easing.myEasing = function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        }

        $("#button").click(function() {
            $('#myDiv').slideToggle(
                3000, // <-- Animation Duration (3000 ms)
                'myEasing'  // <-- the Name of your easing function
            );
        });

});

以上是上述代码的演示，其中包含重命名为easeOutCubic的{{1}}函数，并应用于myEasing多维数据集，持续时间为3秒。

http://jsfiddle.net/kJZxQ/

好的，现在你的问题：你说你想要“......缓和效果非常快，但在缓和期间会大大减慢。”

以下是slideToggle()的图表： easeoutcubic