jQuery Easing动画效果扩展（转）

朱雀 2021-12-22 08:59 191阅读 0赞

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

[jQuery Easing][]是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。

[官网][jQuery Easing] [demo][]

#### 引入Easing js文件 ####

该插件基于jQuery，所以需要同时引入jQuery库文件和Easing js文件。

#### 使用jQuery Easing ####

jQuery Easing是在jQuery原有的动画效果上进行了扩展，所以使用时可以根据jQuery原有的动画函数进行扩展。

**1.jQuery默认动画**

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：

$(element).slideUp({ 
        duration: 1000,  
        easing: method,  
        complete: callback 
    });

参数**duration**：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。

参数**easing**：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们 是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce. 各动画实际效果请参照[演示demo][demo]。

参数**complete**：动画结束后回调函数callback，可以自定义动画结束后的调用函数。

**2.使用jQuery自定义动画函数animate()**

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果，使用代码如下：

$(element).animate(
    　　　{ height:500, 
         width:600 
        },
        easing: 'easeInOutQuad', 
        duration: 500, 
        complete: callback 
    });

上面的代码定义了一个缓冲效果的动画，我们可以根据项目需要，结合jQuery Easing制作各种动画效果。

*装载自： http://www.helloweba.com/view-blog-212.html*

转载于:https://www.cnblogs.com/JoannaQ/p/3568126.html

[jQuery Easing]: http://gsgd.co.uk/sandbox/jquery/easing/
[demo]: http://www.helloweba.com/demo/easing/