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 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
JS实现瀑布流布局
Oct 21 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
Vue Element plus使用方法梳理
Dec 24 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
php分页函数
2006/07/08 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jquery json 实例代码
2010/12/02 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python实现黑客字幕雨效果
2018/06/21 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python实现简单加密解密机制
2019/03/19 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
基于python实现对文件进行切分行
2020/04/26 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
化工专业推荐信范文
2013/11/28 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
个人售房合同协议书
2016/03/21 职场文书
Python基础之条件语句详解
2021/06/16 Python
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python