jQuery中使用animate自定义动画的方法


Posted in Javascript onMay 29, 2016

动画 animate()

01.animate()方法的简单使用

有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了。

操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别。

$(elem).fadeOut(3000) 
$(elem).animate({ 
opacity:0
},3000)

显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画。

语法:

1 .animate( properties [, duration ] [, easing ] [, complete ] )

2 .animate( properties, options )

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

参数分解:

properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以,因为参数是red或者GBG这样的值,非常用插件,否则正常情况下是不能只能动画效果的。注意,CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

特别注意单位,属性值的单位像素(px),除非另有说明。单位em 和 %需要指定使用

.animate({
left: , 
width: 'px' 
opacity: 'show', 
fontSize: "em",
}, );

除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({
width: "toggle"
});

如果提供一个以+= 或 -=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({ 
left: '+50px'
}, "slow");

duration:时间

动画执行的时间,持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒。
easing动画运动的算法:

jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画,如果需要其他的动画算法,请查找相关的插件

complete回调

动画完成时执行的函数,这个可以保证当前动画确定完成后发会触发

02.animate() 方法来依次执行多个动画

animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate的提供第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知。

.animate( properties, options )

options参数

duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调

如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

列出常用的方式

$('#elem').animate({
width: 'toggle', 
height: 'toggle'
}, {
duration: ,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});

调用animate()方法可以创建自定义动画效果,它的调用格式为:

$(selector).animate({params},speed,[callback])

其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。

例如,调用animate()方法以由小到大的动画效果显示图片,如下图所示:

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$('img').animate({
width: 'px';
height:'px'
}, , function() {
$("#tip").html('执行完成!');
});
})
</script>
</body>

在浏览器中显示的效果:

jQuery中使用animate自定义动画的方法

从图中可以看出,调用animate()方法,以渐渐放大的动画效果显示图片元素,当动画执行完成后,通过回调函数在页面的<div>元素中显示“执行完成!”的字样。

Javascript 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
three.js 如何制作魔方
Jul 31 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
You might like
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python控制多进程与多线程并发数总结
2016/10/26 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
200行python代码实现2048游戏
2019/07/17 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python with语句用法原理详解
2020/07/03 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
Exception类的常用方法
2012/06/16 面试题
高中化学教学反思
2014/01/13 职场文书
企业消防安全责任书
2014/07/23 职场文书
群众路线个人整改措施
2014/10/24 职场文书
中学生自我评价2015
2015/03/03 职场文书
南极大冒险观后感
2015/06/05 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python