jQuery动画效果插件easing的使用方法

时间：2024-04-07 10:18:31

我们都知道 jQuery自定义动画的函数animate自带的效果太单一了，只有linear和swing，这样的话怎么做有趣的效果呢？

下面我给大家介绍jquery的动画效果插件easing

cdn：https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js

引入之后，easing参数可选的值就有以下32种：

1.linear
2.swing
3.easeInQuad
4.easeOutQuad
5.easeInOutQuad
6.easeInCubic
7.easeOutCubic
8.easeInOutCubic
9.easeInQuart
10.easeOutQuart
11.easeInOutQuart
12.easeInQuint
13.easeOutQuint
14.easeInOutQuint
15.easeInExpo
16.easeOutExpo
17.easeInOutExpo
18.easeInSine
19.easeOutSine
20.easeInOutSine
21.easeInCirc
22.easeOutCirc
23.easeInOutCirc
24.easeInElastic
25.easeOutElastic
26.easeInOutElastic
27.easeInBack
28.easeOutBack
29.easeInOutBack
30.easeInBounce
31.easeOutBounce
32.easeInOutBounce

这么多效果 怎么找到自己需要的呢？不急 看下面

jQuery动画效果插件easing的使用方法
进网站：http://gsgd.co.uk/sandbox/jquery/easing/#example

往下滑 找到 Example 选项卡里的是效果 选好后 点击 “The Clicker” 就会出来效果了

一般一个项目中不可能会用到这么多效果，为了减少代码冗余，必要时可以不用引入整个jquery.easing.js，我们可以只把我们需要的几种easing放入Javascript文件中，如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果，只需要下面的代码就可以了

jQuery.extend( jQuery.easing,  
{  
    easeOutExpo: function (x, t, b, c, d) {  
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;  
    },  
    easeOutBounce: function (x, t, b, c, d) {  
        if ((t/=d) < (1/2.75)) {  
            return c*(7.5625*t*t) + b;  
        } else if (t < (2/2.75)) {  
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
        } else if (t < (2.5/2.75)) {  
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
        } else {  
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
        }  
    },  
});

使用jQuery自定义动画函数animate来指定easing效果，如自定义一种类弹簧效果的动画：

$(myElement).animate({  
    top: 500,  
    opacity: 1  
}, 1000, 'easeOutBounce');

jQuery easing插件 效果图解

jQuery动画效果插件easing的使用方法

转自：495157297(部分有删改)

相关文章