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简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
Jquery Fade用法详解
Nov 06 jQuery
纯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
mysql 全文搜索 技巧
2007/04/27 PHP
php 验证码实例代码
2010/06/01 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
详解在React里使用"Vuex"
2018/04/02 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python操作日期和时间的方法
2014/03/11 Python
python中property和setter装饰器用法
2019/12/19 Python
编程输出如下图形
2013/11/24 面试题
西式婚礼证婚词
2014/01/12 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
社区清明节活动总结
2014/07/04 职场文书
客房领班岗位职责
2015/02/11 职场文书
经营目标责任书
2015/05/08 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL
python中filter,map,reduce的作用
2022/06/10 Python