js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现
一、总结
一句话总结:同一个jquery对象,直接写多个animate()就好。
1、什么是队列动画?
比如说先左再下,而不是左下一起走
2、怎么实现队列动画?
a、可以考虑用animate的动画结束函数来实现,但是这样的话太麻烦,一则嵌套容易出错,二则不适合多重队列动画
animate(params,[speed],[easing],[fn])
25 $('#btn2').click(function(){
26 $('#div1').animate({
27 left:'300px'
28 },1000,function(){
29 $('#div1').animate({
30 top:'300px'
31 },function(){
32 $('#div1').animate({
33 left:'50px'
34 })
35 })
36 })
37 })
b、直接写多个animate()就好
38 $('#btn3').click(function(){
39 $('#div1').animate({left:'300px'})
40 .animate({top:'300px'})
41 .animate({left:'30px'})
42 })
二、jquery队列动画如何实现
1、自定义动画
jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现,原理跟CSS3动画原理是一样的。
- animate()方法执行CSS属性集的自定义动画。
语法:animate(params,[speed],[easing],[fn])
参数:params:一组包含作为动画属性和终值的样式属性和及其值的
集合注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
#div1,#div2,#div3{width: 100px;height: 100px;border:1px solid green;display: inline-block;background: orange;position: absolute;left: 10px;top: 100px}
</style>
</head>
<body>
<h3>jQuery动画效果</h3>
<input id="btn1" type="button" value="animate">
<input id="btn2" type="button" value="队列动画1">
<input id="btn3" type="button" value="队列动画2"><br>
<div id="div1" style="width: 100PX;height: 100PX;background: red">jQuery动画效果</div>
<script type="text/javascript">
$('#btn1').click(function(){
$('#div1').animate({
left:'300px',
top:'300px'
},1000)
})
$('#btn2').click(function(){
$('#div1').animate({
left:'300px'
},1000,function(){
$('#div1').animate({
top:'300px'
},function(){
$('#div1').animate({
left:'50px'
})
})
})
})
$('#btn3').click(function(){
$('#div1').animate({left:'300px'})
.animate({top:'300px'})
.animate({left:'30px'})
})
</script> </body>
</html>
js进阶 13-5 jquery队列动画如何实现的更多相关文章
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- 第73天:jQuery基本动画总结
一.DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(doc ...
随机推荐
- unbound和mail服务的部署和简单应用
1.服务的介绍 Unbound是一个缓存DNS解析器.unbound官网 它使用根区域的内置权威名称服务器列表 (.),所谓的根提示.在收到DNS查询时,它会询问 答案的根名称服务器,几乎在所有情况下 ...
- [C/C++标准库]_[0基础]_[使用fstream合并文本文件]
场景: 1. 就是合并文本文件,而且从第2个文件起不要合并第一行. 2. 多加了一个功能,就是支持2个以上的文件合并. 3. 问题: http://ask.csdn.net/questions/192 ...
- elasticsearch index 之 create index(-)
从本篇开始,就进入了Index的核心代码部分.这里首先分析一下索引的创建过程.elasticsearch中的索引是多个分片的集合,它只是逻辑上的索引,并不具备实际的索引功能,所有对数据的操作最终还是由 ...
- hadoop集群环境配置成功与否查看方法
1.Hadoop启动jobhistoryserver来实现web查看作业的历史运行情况,由于在启动hdfs和Yarn进程之后,jobhistoryserver进程并没有启动,需要手动启动jobhist ...
- MATLAB 软件学习
what 列出当前目录或指定目录下的M\MAT 和 MAX 文件 … 在语句行尾端表示该行未完 ! 调用操作系统的命令 isvarname 判断变量名是否有效 声明全局变量 变量名前加 ...
- [BZOJ4555 TJOI2016 HEOI2016 求和]
第一篇博客,请大家多多关照.(鞠躬 BZOJ4555 TJOI2016 HEOI2016 求和 题意: 给定一个正整数\(n\)(\(1\leqq n \leqq100000\)),求: \[ ...
- ORM进阶:Hibernate的优劣对照
hibernate是一种是轻量级的ORMapping框架.学过EntityFramework的.会感觉挺亲切的. 对于各种层次程序猿对数据库的设计: 小菜程序员这样做:首先考虑数据的存储,对于功能的实 ...
- 【UML】UML在软件开发各个阶段的应用
一.UML5个互联视图 UML中经常使用5个互联的视图来描写叙述系统的体系结构. 如图 (1)用例视图(Use-case View) 由专门描写叙述可被终于用户.分析人员.測试人员看到的系统行为的用例 ...
- Qt 5.11的QChar、QString、QTextBoundaryFinder和双向文本算法现在完全兼容Unicode 10
本文翻译自:Qt 5.11 released 原文作者: Qt公司CTO兼Qt开源项目维护官Lars Knoll翻译校审:Richard.Hongfei.Haipeng 5月22日,我们提发布了Qt ...
- js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...