jquery缓动swing liner控制动画过程不同时刻的速度


Posted in Javascript onMay 29, 2014

jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数,这就是缓动(easing),它确定了动画过程不同时刻的速度。例如,将一个元素移过页面的时候,可能让这个元素缓慢地开始移动,然后变得很快,最后随着动画的完成再次慢下来。给动画添加缓动,使得动画在视觉上更有趣且更有动态感。

jQuery只包含了两个缓动方法:swing和linear。linear方法提供了一个稳定的动画,以使得动画的每个步骤都是相同的(例如,如果要让一个元素以逐渐变化的方式穿过屏幕,每一步的距离和前一步都是相同的)。swing要更加动态一些,随着动画的开始变得更加快一些,然后再慢下来。swing是一个常用设置,因此,如果没有指定任何缓动,jQuery会使用swing方法。

对于任何jQuery效果来说,缓动方法是其第二个参数,因此,要使用linear方法将一个元素滑出视线,可以这样编写代码:

$('#element'). slideUp(1000,'linear');

当使用animate()函数的时候,缓动方法是第三个参数,第一个参数是一个对象直接量,包含了我们想要实现动画的CSS属性;第二个参数是动画的整体速度。例如,要对动画代码使用linear缓动方法,可以像下面这样编写代码:
$('#message').animate( 
{ 
left:'650px', 
opacity:.5, 
fontSize:'24px' 
}, 
1500, 
'linear' 
);

然而,并不仅限于使用jQuery所提供的两个缓动方法。使用jQuery插件可以添加一系列的其他的缓动方法。
Javascript 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 #Javascript
js实现页面跳转重定向的几种方式
May 29 #Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 #Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 #Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 #Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 #Javascript
href下载文件根据id取url并下载
May 28 #Javascript
You might like
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
SQL Server面试题
2013/04/04 面试题
幼儿园新学期寄语
2014/01/18 职场文书
硕士生工作推荐信
2014/03/07 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL