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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 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
PHP 文件缓存的性能测试
2010/04/25 PHP
基于php-fpm的配置详解
2013/06/03 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Python素数检测的方法
2015/05/11 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python 检测图片是否有马赛克
2020/12/01 Python
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
教师年终个人自我评价
2013/10/04 职场文书
客服部班长工作责任制
2014/02/25 职场文书
公开服务承诺制度
2014/03/26 职场文书
社区创先争优承诺书
2014/08/30 职场文书
超市店庆活动方案
2014/08/31 职场文书
学生偷窃检讨书
2014/09/25 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
大学生学期个人总结
2015/02/12 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
基于angular实现树形二级表格
2021/10/16 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js