jQuery.easing – easeOutCubic – 强调轻松
我正在使用Robert的jQuery easing插件（ http://gsgd.co.uk/sandbox/jquery/easing/ ），我需要强调或拖出缓动效果。
基本上，我希望缓和效果非常快，但在缓出期间会大大减慢。
我相信我可以使用jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)来做到这jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)但我无法弄清楚如何正确使用它。
怎么能实现这一目标？
你不需要一个缓动插件来使用jQuery进行自定义缓动。 您只需要要使用的一个缓动函数的源JavaScript代码。
这是从jQuery UI源代码获得的easeOutCubic函数。 请参阅此主题了解更多信息
$.easing.easeOutCubic = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }
现在您可以编辑该function和/或重命名它…
$.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 ); }); });
下面是上面代码的演示，其中包含重命名为myEasing的easeOutCubic函数，并应用于持续3秒的slideToggle()多维数据集。
好的，现在你的问题：你说你想要“......缓和效果非常快，但在缓和期间会大大放缓。”
这是easeOutCubic的图表： 
你有两个选项，你可以操纵缓动方程本身，或者我们可以看到其他一些缓和函数是否有类似的曲线，但更陡峭（更快）直到缓出部分。
这个演示页面直观地显示了所有的缓动曲线......
http://api.jqueryui.com/easings/
正如您所看到的，几条曲线的形状类似于（7） - easeOutCubic但前端更陡峭。 以下是几个例子......
（10） - easeOutQuart 
easeOutQuart演示
（13） - easeOutQuint 
easeOutQuint演示
（16） - easeOutExpo 
easeOutExpo演示
看起来像是最后一个， easeOutExpo是最陡峭的股票function。 通过比较上面包含的方程式的差异，我们还可以操纵easeOutExpo方程以进一步陡峭曲线。
这个自定义方程式非常快，然后极大地放慢速度......
甚至比上一次更极端......
上次演示的持续时间增加到6秒，以夸大效果......
通过比较上述演示的数学方程式，您可以看到正在操纵哪个变量来增强效果并相应地进行自己的微调。
我真的认为easeOutExpo更像你所描述的。 从本质上讲，它是你的easeOutCubic方程，但在前面只有更快，在结尾时更慢。