使用 jquery.easing.js 增强动画过渡效果
来源:互联网 发布:罗技 无线鼠标 知乎 编辑:程序博客网 时间:2024/04/28 03:03
原文地址:http://www.qianxingzhem.com/post-1778.html
jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果。
jquery.easing.js 这个插件,增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化。
先来看一下:Demo。官方也有案例:打开官方主页。
如何使用 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 简单一些,不需要复杂的属性参数,所以可以直接这样写:
在使用中 easing 参数是可以省略的,省略之后,就会调用默认的过渡样式。可以使用下面一句代码,指定默认的动画过渡样式。
jQuery.easing.def = "过渡样式名,例如 easeInOutCirc";
用起来挺简单的,但是有了更和谐的变化效果,可以增强用户体验。更多用法欢迎观看 Demo 。
jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果。
jquery.easing.js 这个插件,增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化。
先来看一下:Demo。官方也有案例:打开官方主页。
如何使用 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 参数是可以省略的,省略之后,就会调用默认的过渡样式。可以使用下面一句代码,指定默认的动画过渡样式。
jQuery.easing.def = "过渡样式名,例如 easeInOutCirc";
用起来挺简单的,但是有了更和谐的变化效果,可以增强用户体验。更多用法欢迎观看 Demo 。
0 0
- 使用 jquery.easing.js 增强动画过渡效果
- 使用 jquery.easing.js 增强动画过渡效果
- jquery.easing.js 使用动画过度效果
- jQuery Easing.js 动画效果扩展
- jQuery Easing 运动效果插件 easing.js
- jQuery Easing 动画效果扩展
- jQuery Easing 动画效果扩展
- jQuery Easing 动画效果扩展
- jQuery Easing 动画效果扩展
- jQuery Easing 动画效果扩展
- 原生js使用缓动函数库easing动画效果
- jQuery Easing动画效果扩展插件
- Jquery----easing内置的动画效果
- jQuery Easing动画效果扩展插件
- jQuery Easing 动画
- jquery.easing.js的使用示例
- p5.js入门教程(3) 平滑过渡(Easing)
- jQuery - plugins插件 - easing动画
- ajax操作xml
- [Android]嵌套Fragment以及startActivityForResult()
- 浏览器判断是否安装了ios/android客户端程序
- Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException
- android设置字体工具类(需要自己先下载ttf文件)
- 使用 jquery.easing.js 增强动画过渡效果
- eclipse添加hibernate 插件和spring插件
- gdb移植到开发板
- Java命令学习系列(零)——常见命令及Java Dump介绍
- 如何让Toast消息在应用退出后不再显示
- HDU 1257 最少拦截系统
- android的 root权限
- Ubuntu 14.04下关于C连接MySQL数据库的环境配置
- Mysql忘记密码之Linux下重置密码