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 22 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
javascript学习之json入门
Dec 22 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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 魔术方法使用说明
2009/10/20 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python中时间模块的基本使用教程
2019/05/14 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python中re模块知识点总结
2021/01/17 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
商业活动邀请函
2014/02/04 职场文书
先进集体获奖感言
2014/02/13 职场文书
倡议书范文格式
2014/05/12 职场文书
土建施工员岗位职责
2014/07/16 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS