Jquery ScrollTo 缓动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4275329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:58:00  来源:igfitidea点击:

Jquery ScrollTo Easing

jqueryscrolltoeasing-functions

提问by JoaoPedro

Can′t apply an easing method to Jquery ScrollTo:

无法对 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.

这并没有减轻任何事情......我现在开始使用jquery(长期使用原型)所以这肯定是我的错误。我需要一个缓动插件来实现这一点吗?这个插件的缓动选项是什么(如果有的话)?文档对此并不清楚。谢谢。

回答by Gidon

From jQuery:

来自 jQuery:

The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear.

jQuery 库中唯一的缓动实现是默认的,称为 swing 和一个以恒定速度进行的,称为 linear

So easing: 'linear'is not supposed to show anything. Try easing: 'swing'.

所以easing: 'linear'不应该显示任何东西。试试easing: 'swing'

回答by Mike Wells

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

And a great list of easings can be found here:

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

http://easings.net/

http://easings.net/

回答by Brian Williams

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

我知道这是一个旧线程,但我找到了它并帮助了我。正如 Palmsey 在其中一条评论中提到的,scrollTo Demo 展示了一个使用缓动的示例,但实际上并没有提到它从http://gsgd.co 上的缓动插件中借用了一小段代码。英国/沙箱/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;
    };

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

但是,如果您包含上面提到的整个缓动插件,则可以使用http://easings.net/ 中提到的任何功能

回答by Shikiryu

linearis the default option of easing : linear animation => straight to the point in a sec.

linear是 easing 的默认选项:线性动画 => 在一秒钟内直接到点。

try easing:'elasout'

尝试 easing:'elasout'