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 相关文章推荐
巧用weui.topTips验证数据的实例
Apr 17 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
纯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中json_encode中文编码问题分析
2011/09/13 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Django Admin实现上传图片校验功能
2016/03/06 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
python palywright库基本使用
2021/01/21 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
测量实习生自我鉴定
2013/09/19 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
礼貌问候语大全
2015/11/10 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP