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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
js实现百度登录窗口拖拽效果
Mar 19 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解析html的实现代码
2011/08/08 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
smarty中常用方法实例总结
2015/08/07 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
python选择排序算法的实现代码
2013/11/21 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python性能提升之延迟初始化
2016/12/04 Python
使用Python生成XML的方法实例
2017/03/21 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python递归全排列实现方法
2018/08/18 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
护士的自我鉴定
2014/02/07 职场文书
工作表现自我评价
2014/02/08 职场文书
健康教育评估方案
2014/05/25 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
工厂标语大全
2014/10/06 职场文书
终止劳动合同通知书
2015/04/16 职场文书
英文辞职信范文
2015/05/13 职场文书
春季运动会加油词
2015/07/18 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书