如何使用ScrollTo插件进行内联缓动

时间:2013-08-26 10:56:05

标签: javascript jquery scrollto easing

我尝试使用ScrollTo插件来缓解一些效果。

我不想包含easing插件文件,因为我只会使用一次而且只能使用一个缓动效果。

我想使用'easeOutBack':

easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}

我的scrollTo的功能代码如..

$(window).scrollTo(element,800,{offset:-80,onAfter:function(){
            alert('done');
}});

所以我尝试插入像...一样的缓动效果。

$(window).scrollTo(element,800,{offset:-80,
easing:function(x, t, b, c, d){
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
onAfter:function(){
    alert('done');
}});

它不起作用。

  

TypeError:b.easing [this.easing]不是函数

1 个答案:

答案 0 :(得分:1)

您只需将缓动功能存储在$.easing

$.easing.easeOutBack = function(x, t, b, c, d, s) {
    if(s == undefined) s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
};

之后,您可以像加载缓动插件时那样使用它。

直接传递函数不起作用,因为jQuery的animate()只接受缓动函数的字符串(在$.easing中查找)。