使用 jQuery Easing Plugin 增强动画过渡效果

2014-09-09 03:19 前端狂奔的蜗牛

jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。效果演示

如何使用 jquery.easing.js
第一步 引入插件
jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

```html
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
```
	
然后再在引入代码下面编写调用的 JavaScript 代码，注意代码顺序。

第二步 启用插件
首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度，从原本的 300px 变成 600px。按照 animate 的写法，加上 easing 。

$('.aa').animate( {'width':'600'} , { duration:1000,easing:'easeInOutCirc' });
这样，就对 aa 对象，启用了一个 easeInOutCirc 过渡效果，在 1000毫秒 内变成 600px。

可以应用的动画方法
不仅仅支持 animate 方法，还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以，这个插件相当于扩充了官方的过渡效果样式。

插件的参数
这个插件有三个参数：duration、easing、complete。

duration 参数
用来指定动画变化的时间，以毫秒为单位。

easing 参数
指定这个动画要使用何种过渡样式。具体的过渡样式名和效果，需要在官方主页上查看左边的 “Example”，选择找到自己想要的效果。

complete 参数
设置一个回调函数，当动画完成之后，执行这个函数。

其他注意事项
使用 slideUp 动画方法
slideUp 这类的动画方法，要比 animate 简单一些，不需要复杂的属性参数，所以可以直接这样写：

$(element).slideUp(1000, method, callback}); $(element).slideUp({ duration: 1000, easing: method, complete: callback});
其他的 hide 、show 之类的方法，自行类比。

指定默认的 easing 样式
在使用中 easing 参数是可以省略的，省略之后，就会调用默认的过渡样式。可以使用下面一句代码，指定默认的动画过渡样式。

jQuery.easing.def = "过渡样式名，例如 easeInOutCirc";
用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。

作者：狂奔的蜗牛 出处： http://www.host900.com/

本文版权归作者所有，欢迎转载。未经作者同意下，必须在文章页面明显标出原文链接及作者，否则保留追究法律责任的权利。

如果您认为这篇文章还不错或者有所收获，可以分享给您的小伙伴，因为你的支持是我继续写作，分享的最大动力！

上一篇tooltip jquery插件tooltipsy

下一篇ajaxform插件，能提交上传文件的表单