jQuery笔记之animate中的queue
队列
队列的执行顺序
queue()
dequeue()
输出对象里面的内容
依次出队
不过这样写太麻烦了,因为每次都要输出,所以我们看下面的方法
运用到队列输出的
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div class="demo"></div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<script>
//jquery queue dequeue clearQueue
// queue 可以传两个参数 type content。 一个是自定义的名字,还有一个是内容
//调用queue这个方法后会创建一个对象
//{chain: [function, function, function]} $('.demo')
.css({position: 'absolute', left: 0, top: 0, width: 100, height: 100, backgroundColor: 'red'})
.on('click', function(){ //绑定点击事件
$(this).dequeue('chain'); //输出队列chain
}).queue('chain', function(next){ //接着找到了下面的队列函数可以执行输出
$(this).animate({width: 120, height: 120, left: 100, top: 100});//第一次
next();
}).queue('chain', function(next){
$(this).animate({width: 220, height: 220, left: 200, top: 200});//第二次
next();
}).queue('chain', function(next){
$(this).animate({width: 320, height: 220, left: 200, top: 300});//第三次
});
</script>
</body>
</html>
jQuery笔记之animate中的queue的更多相关文章
- jQuery之animate中的queue
queue.dequeue clearQueue 清空 用队列完成之前动画的操作:
- jQuery动画高级用法(上)——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- jQuery动画高级用法(上)——详解animation中的.queue()函数
如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...
- jQuery笔记(三)jQuery中的事件
; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
随机推荐
- xml建模
1.建模的由来 就是将指定的xml字符串当作对象来操作 如果说当对一个指定的xml格式字符串完成了建模操作, 好处在于,只需要调用指定的方法就可以完成预定的字符串获取: 2.建模的思路 1.分析需要被 ...
- OO第三单元总结——JML
目录 写在前面 JML理论基础 JML工具链 JMLUnitNG的使用 架构设计 Bug分析 心得体会 写在前面 OO的第三单元学习结束了,本单元我们学习了如何使用JML语言来对我们的程序进行规格化设 ...
- httpclient请求去掉返回结果string中的多余转义字符
public String doGet() { String uriAPI = "http://XXXXX?str=I+am+get+String"; String result= ...
- Dialog集合
点击查看原文 demo下载地址http://download.csdn.net/detail/metis100/8498401 安卓开发一年.開始想整理些资料成库,以备日后高速开发. 第一天,整理了经 ...
- iphone5s 耳机更换插头 EarPods change jack
iphone5s 耳机使用了不到两年,出现了接头接触不良,话筒线短路的状况,经常自动出现暂停或者siri.买了一个新耳机,这几天有时间,把旧耳机修好了,更换了一个新的插头. 工具/原料 剥线钳 ...
- matlab 画图技巧
基本画图工具:matlab 画图中线型及颜色设置 matlab中坐标轴设置技巧 **Matlab中的坐标轴设置技巧** axisoff; %去掉坐标轴 axistight; ...
- Java 8 中的 java.util.Optional
Java 8 中的 java.util.Optional 学习了:https://blog.csdn.net/sun_promise/article/details/51362838 package ...
- 阅读《Android 从入门到精通》(33)——Intent 分类
Intent 分类 显式 Intent:Intent("android.intent.action.CALL", Uri.parse("tel:" + stri ...
- 小胖说事35-----Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer posi
2011-06-11 15:19:17.167 ***[930:707] *** Terminating app due to uncaught exception 'CALayerInvalidGe ...
- php 文件压缩zip扩展
<?php function addFileToZip($path, $zip) { $handler = opendir($path); //打开当前文件夹由$path指定. while (( ...