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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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合并数组并保留键值的实现方法
2018/03/12 PHP
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
python模拟Django框架实例
2016/05/17 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python抖音表白程序源代码
2019/04/07 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python实现静态服务器
2019/09/05 Python
Python实现SMTP邮件发送
2020/06/16 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
金融管理应届生求职信
2014/02/20 职场文书
追悼会主持词
2014/03/20 职场文书
软件售后服务承诺书
2014/05/21 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
小学英语复习计划
2015/01/19 职场文书
贷款承诺书
2015/01/20 职场文书
财政局个人总结
2015/03/04 职场文书
小学大队长竞选稿
2015/11/20 职场文书
Python实现简单的猜单词
2021/06/15 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Java spring定时任务详解
2021/10/05 Java/Android
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL