jquery - 我不知道如何在 jQuery 中进行缓动

Question

这是我从网上拼凑出来的。slideDown 有效，但看起来仍然是线性的。我的方法是完全错误的，还是我只是错过了一些微妙的东西？我如何让它工作？

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

 $("#view").slideDown(200,'easeOutQuad');

Answer 1

也许你错过了一些微妙的东西。看起来您正在尝试使用缓动插件作为指南进行“自定义缓动”。我认为正在发生的是您的动画持续时间非常短，只有 200 毫秒。在这个速度下，速度的降低会非常微妙。尝试将其扩展到 2000（甚至 3000）毫秒以查看缓动的实际效果。

此外，easeOutQuad 本身就是一个微妙的动画。运行时不会产生戏剧性的效果。作为学习 jQuery 缓动基础知识的问题，尝试从“easeOutElastic”中获取算法代码并将其放入您的函数中以查看更显着的效果。这将使您有信心知道您的代码正在运行。一旦您确信它可以正常工作，请取出弹性算法并将您的原始算法放回原处。

示例代码：

$.easing.easeOutQuad = function (x, t, b, c, d) {
    //return -c *(t/=d)*(t-2) + b;
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

$("#view").slideDown(2000,'easeOutQuad');