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 相关文章推荐
js 获取Listbox选择的值的代码
Apr 15 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Python聚类算法之DBSACN实例分析
2015/11/20 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
中国旅游网站:途牛旅游网
2019/09/29 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
餐饮营销方案
2014/02/23 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
应届大专生求职信
2014/06/26 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
教师节座谈会主持词
2015/07/03 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python