如何在动画/卷轴上添加“缓动" [英] How to add 'easing' to animate/scrolltop

问题描述

我正在使用以下功能来创建滚动动画以锚定链接:

I am using the following function to create a scroll animation to anchor links:

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500 );
    return false;
});

我想添加宽松政策.但是，当我在"500"之后添加"easing"时，它将破坏脚本:

I would like to add easing. However, when I add 'easing' after '500' it breaks the script:

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500, easing );
    return false;
});

有任何想法我在做什么错吗?

Any ideas what I am doing wrong?

推荐答案

首先，您需要包含jQuery.UI脚本，然后您的代码应如下所示:

First you need include jQuery.UI script then your code should look:

$('a').click(function(){
    var top = $('body').find($(this).attr('href')).offset().top;
    $('html, body').animate({
        scrollTop: top
    },500, 'easeOutExpo');

    return false;
});

供您参考:

轻松

.animate()的其余参数是一个命名缓动的字符串 使用的功能.缓动函数指定了 动画在动画中的不同点进行.这 jQuery库中只有缓动实现是默认设置， 称为秋千，而以恒定的速度前进的称为 线性的.使用插件可以使用更多轻松功能， 最值得注意的是 jQuery UI 套件.

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

---

为什么您的代码不起作用:

1. 因为使用this属于动画方法的范围， 引用body和html对象.
2. 因为easing不是方法.是动画属性的字符串类型，因此您需要 将其写为字符串，例如:'easeOutExpo'或"easeOutExpo".

1. Because you use this which was in scope of animation method and reference to body and html objects.
2. Because easing is not a method. Is a string type of animation property so you need write it as string for example: 'easeOutExpo' or "easeOutExpo".

这篇关于如何在动画/卷轴上添加“缓动"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！