队列

队列的执行顺序

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的更多相关文章

  1. jQuery之animate中的queue

    queue.dequeue clearQueue  清空 用队列完成之前动画的操作:

  2. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  3. jQuery动画高级用法（上）——详解animation中的.queue()函数

    如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...

  4. jQuery笔记（三）jQuery中的事件

    ; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...

  5. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  6. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  7. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  8. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  9. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

随机推荐

  1. 洛谷 P3879 [TJOI2010]阅读理解

    P3879 [TJOI2010]阅读理解 题目描述 英语老师留了N篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典,为了节约时间,现在要做个统计,算一算某些生词都在哪几篇短文中出现过. 输入输出 ...

  2. TeamCity - Docker创建

    // 创建Server docker run -it --name teamcity-server-instance \-v /home/tc_datadir:/data/teamcity_serve ...

  3. django 简易博客开发 4 comments库使用及ajax支持

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇文章我们介绍了静态文件使用以及如何使用from实现对blog的增删改,这篇将介绍如何给 ...

  4. java quartz的使用,做时间轮询调用 CronTrigger

    import org.quartz.Job; import org.quartz.JobExecutionContext; import org.quartz.JobExecutionExceptio ...

  5. 一处折腾笔记：Android内嵌html5加入原生微信分享的解决的方法

    有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产 ...

  6. 《从0到1》读书笔记第一章&quot;未来的挑战&quot;第1记:把握潮流风向

    这几天刚到手当前炙手可热的来自PayPal创始人Peter Thiel的<Zero to One>.中文名<从0到1>,由高玉芳翻译.中信出版社出版.由于到货时刚好有事情在忙, ...

  7. 基于UDP的通讯

    XX:那飘过的100~_~{2014/10/03 10:57} UDP是一种面向非连接SOCK_DGRAM,提供无连接服务.数据包以独立包形式发送,不提供无措保证,数据能够丢失或反复. UDP的Ser ...

  8. HDU1542Atlantis(扫描线)

    HDU1542Atlantis(扫描线) 题目链接 题目大意:给你n个覆盖矩形,问最后覆盖的面积. 解题思路:将每一个矩形拆成两条线段,一条是+1的,还有一条是减1的.然后扫描先从上往下扫描,碰到加1 ...

  9. oracle官方文档_查看初始化參数（举例）

    原创作品,出自 "深蓝的blog" 博客.深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46864217 记录 ...

  10. 李洪强iOS开发之函数式 编程初窥

    函数式 编程初窥   最近在学习Erlang和Python.Erlang是完全的函数式编程语言,Python语言是面向对象的语言,但是它的语法引入了大量的函数式编程思想.越研究越觉得函数式的编程思路可 ...