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 学习笔记 防止发生命名冲突
Jul 30 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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程序内部post数据的方法
2015/03/31 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
javascript History对象原理解析
2020/02/17 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python如何将图片转换素描画
2020/09/08 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
十岁生日父母答谢词
2014/01/18 职场文书
幼儿教师研修感言
2014/02/12 职场文书
城管综合整治方案
2014/05/01 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android