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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
浅谈webpack-dev-server的配置和使用
May 17 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python中的类学习笔记
2014/09/23 Python
Python 中的with关键字使用详解
2016/09/11 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Django发送邮件功能实例详解
2019/09/02 Python
python with语句的原理与用法详解
2020/03/30 Python
Django缓存Cache使用详解
2020/11/30 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
.net工程师笔试题
2012/06/09 面试题
部队领导证婚词
2014/01/12 职场文书
事业单位鉴定材料
2014/05/25 职场文书
十佳党员事迹材料
2014/08/28 职场文书
2015年组织部工作总结
2015/04/03 职场文书
计划生育工作总结2015
2015/04/03 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
python神经网络Xception模型
2022/05/06 Python