我无法弄清楚如何在jQuery中进行缓动

时间:2012-06-15 19:42:14

标签: jquery easing jquery-easing

这是我从互联网上拼凑而成的。 slideDown可以工作但它看起来仍然是线性的。我的aproach是完全错误的还是我只是错过了一些微妙的东西?我如何让它发挥作用?

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

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

1 个答案:

答案 0 :(得分:0)

也许你错过了一些微妙的东西。看起来您正在尝试使用缓动插件作为指南进行“自定义缓和”。我认为发生的是你的动画持续时间非常短,只有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');