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 23 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
在Vue中使用HOC模式的实现
Aug 23 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python tkinter组件使用详解
2019/09/16 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
使用Tkinter制作信息提示框
2020/02/18 Python
PyTorch-GPU加速实例
2020/06/23 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
EJB timer的种类
2014/10/28 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
护士自我鉴定范文
2013/10/06 职场文书
房产继承公证书
2014/04/09 职场文书
社区义诊活动总结
2014/04/30 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
致接力运动员加油稿
2015/07/21 职场文书
小学大队长竞选稿
2015/11/20 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python