Jquery ScrollTo 缓动

发布于 2024-10-04 12:33:14 字数 237 浏览 7 评论 0原文

无法对 Jquery ScrollTo 应用缓动方法：

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

这不会缓和任何内容... 我现在开始使用jquery（长期以来一直使用prototype）所以这肯定是我的错误。我需要一个缓动插件来实现这个吗？该插件的缓动选项是什么（如果有）？文档对此并不清楚。谢谢。

原文

Can´t apply an easing method to Jquery ScrollTo:

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

This doesn´t ease anything...
Im starting to use jquery now (been using prototype for long) so this is surely my mistake.
Do I need an easing plugin to achieve this? What are the easing option for this plugin (if any)? The documentation is not clear about this.
Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若无相欠,怎会相见 2024-10-11 12:33:14

来自 jQuery：

jQuery 库中唯一的缓动实现是默认的，称为 swing，以及以恒定速度进行的实现，称为 Linear。

所以 easing: 'linear' 不应该显示任何内容。
尝试缓动：'swing'。

回复收藏 0 原文

不语却知心 2024-10-11 12:33:14

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

可以在这里找到一个很棒的缓动列表：

http://easings.net/

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

And a great list of easings can be found here:

http://easings.net/

回复收藏 0 原文

山色无中 2024-10-11 12:33:14

linear 是缓动的默认选项：线性动画 =>一秒钟直接进入正题。

尝试 easing:'elasout'

回复收藏 0 原文

十年九夏 2024-10-11 12:33:14

我知道这是一个旧线程，但我找到了它并且它对我有帮助。正如 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/

I know this is an old thread but i found it and it helped me. As Palmsey has mentioned in the one of the comments, the scrollTo Demo shows an example of using easing, but doesn't actually mention that it has borrowed a small snippet of code from the easing plugin found at http://gsgd.co.uk/sandbox/jquery/easing/. The demo on scrollTo includes this code in the init.js file

    //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;
    };

However if you include the entire easing plugin mentioned above you can use any of the functions mentioned at http://easings.net/

回复收藏 0 原文

~没有更多了~