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
Nov 26 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
js三种排序算法分享
Aug 16 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
react-native使用leanclound消息推送的方法
Aug 06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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如何调用webservice应用介绍
2012/11/24 PHP
ini_set的用法介绍
2014/01/07 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python读取Excel的方法实例分析
2015/07/11 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
初中毕业生自我评价
2015/03/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android