Jquery ScrollTo Easing

Question

无法将缓动方法应用于Jquery ScrollTo：

$("#scroller").scrollTo(target,1000,{axis:'x',easing:'linear'});

这并没有让事情变得更容易... 我现在开始使用jquery（长期以来一直在使用prototype），所以这肯定是我的错误。 我需要一个缓动插件才能实现这个吗？如果有的话，这个插件的缓动选项是什么？文档对此并不清楚。 谢谢。

- JoaoPedro

---

你在使用哪个插件？那个方法不是 jQuery API 的一部分。 - Klemen Slavič

Answer 1

从 jQuery：

jQuery 库中仅有两种缓动效果，分别是默认的 swing 和一种以恒定速率运行的效果称为 linear。

因此，easing: 'linear' 不会显示任何内容。 请尝试使用 easing: 'swing'。

- Gideon

---

做到了。典型的摇摆效果。谢谢。 - JoaoPedro

Answer 2

$("#scroller").scrollTo(target, 1000, {easing: 'easeInOutCirc'});

这里有一个很棒的缓动效果列表:

http://easings.net/

- Mike Wells

Answer 3

linear 是缓动的默认选项：线性动画 => 直接到达终点。

尝试 easing:'elasout'

- Shikiryu

---

它不会破坏任何东西，它是他们主页上的一种滚动缓动类型。更具体地说，它是他们演示中使用的一种：http://demos.flesler.com/jquery/scrollTo/（点击“easing”）。如果您想要一个精确的缓动效果（还有很多），您应该明确指出。 - Shikiryu

如果您查看代码，缓动函数默认情况下位于init.js而不是scrollTo中。它是jQuery缓动插件的一部分：http://gsgd.co.uk/sandbox/jquery.easing.php - palmsey

Answer 4

我知道这是一个旧的帖子，但我找到了它并且帮助了我。正如Palmsey在其中一条评论中提到的那样，scrollTo演示展示了一个使用缓动效果的示例，但实际上并没有提到它从缓动插件http://gsgd.co.uk/sandbox/jquery/easing/ 借用了一小段代码。 scrollTo的演示将此代码包含在init.js文件中。

    //borrowed from jQuery easing plugin
    //http://gsgd.co.uk/sandbox/jquery.easing.php
    $.easing.elasout = function(x, t, b, c, d) {
        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;
    };

然而，如果您包含上述整个缓动插件，则可以使用http://easings.net/中提到的任何函数。

- Brian Williams