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 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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实现mysql数据库备份类
2008/03/20 PHP
javascript常用对话框小集
2013/09/13 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
基于node.js实现爬虫的讲解
2019/02/18 Javascript
React实现全选功能
2020/08/25 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python中bisect的用法
2014/09/23 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python中的随机函数小结
2018/01/27 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python数学形态学实例分析
2019/09/06 Python
python中def是做什么的
2020/06/10 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
初中生物教学反思
2014/01/10 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
2015年妇女工作总结
2015/05/14 职场文书
2016教师节问候语
2015/11/10 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
详细了解java监听器和过滤器
2021/07/09 Java/Android