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

jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。

jquery.easing.js 这个 jQuery 插件增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。先来看一下 DEMO，更多 DEOM 请点击 这里:

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

  
<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";

用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。更多用法欢迎观看 Demo 。

下载： jQuery Easing Plugin 。

>>>继续阅读 使用 jQuery Easing Plugin 增强动画过渡效果的全文 ...

© 我爱水煮鱼 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery 教程：简单的遮罩弹窗效果
• jQuery 发布 1.9 正式版，最后支持 IE 6/7/8
• App-Folders：一个模拟 iOS 文件夹效果的 jQuery 插件
• jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
• jQuery 跟随滚动插件：Sidebar Follow
• Happy.js：轻量级的 jQuery 表单验证插件