jQuery Easing 动画效果扩展增强插件

Question

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

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

使用方法

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

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>

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

jQuery 默认动画

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

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

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

参数 easing：指定动画效果，Easing 提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：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。

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

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

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

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

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

单独使用方法

jQuery.easing.method() All your scripts can use these equations. Call from some kind of time based loop as follows:

jQuery.easing.method(
    null,
    current_time,
    start_value,
    end_value,
    total_time
)

这是方程不需要一个额外的参数，但需要兼容 jQuery

下载地址

Download the following:

• jquery.easing.1.3.js
• jquery.easing.compatibility.js
  如果你不想更改动画类型的名称，你可以使用这个文件
• 项目地址：http://gsgd.co.uk/sandbox/jquery/easing/
• jQuery 地址：http://jqueryui.com/easing/
• Github 地址：https://github.com/gdsmith/jquery.easing