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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
K-近邻算法的python实现代码分享
2017/12/09 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
品管员岗位职责
2013/11/10 职场文书
大学生村官典型材料
2014/01/12 职场文书
大学三年计划书范文
2014/04/30 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android