<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

jQuery.extend({

    queue  ------------------- push()

    dequeue --------------  shift()

    _queueHooks

});

jQuery.fn.extend({

    queue

    dequeue

    delay

    clearQueue

    promise

});

//队列中存储的都是函数

$(function(){

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $.queue( document , 'q1' , aaa );//q1是队列名字

    $.queue( document , 'q1' , bbb );

    $.queue( document , 'q1' , [aaa,bbb] );

    console.log(   $.queue( document , 'q1' )   );//输出队列所有函数

    $.dequeue( document,'q1' );   //从头取一个，aaa()

    $.dequeue( document,'q1' );   //从头取，bbb()

    ------------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $(document).queue('q1',aaa);

    $(document).queue('q1',bbb);

    console.log(  $(document).queue('q1')  );//[aaa,bbb]

    $(document).dequeue('q1');//1

    $(document).dequeue('q1');//2

});

//[   ]

</script>

</head>

<body>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{ width:100px; height:100px; background:red; position:absolute;}

</style>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    $('#div1').click(function(){

        //不是一起变化，先宽完了之后在高最后left，使用队列完成。

        $(this).animate({width : 300},2000);     setInterval

        $(this).animate({height : 300},2000);    setInterval

        $(this).animate({left : 300},2000);      setInterval

    });

    $('#div1').click(function(){

        $(this).animate({width : 300},2000).queue(function(next){

            $(this).css('height',300);

            next(); //也可以写成 $(this).dequeue();

        }).animate({left : 300},2000);  

        $(this).animate({width : 300},2000,function(){//第一个animate执行完之后走回调,回调中打开一个定时器就完了，再执行第二个animate,定时器是异步操作，将会跟第二个animate一起进行。

            //$(this).css('height',300);

            var This = this;

            var timer = setInterval(function(){

                This.style.height = This.offsetHeight + 1 + 'px';

                if( This.offsetHeight == 200 ){

                    clearInterval(timer);

                }

            },30);

        }).animate({left : 300},2000);  

        $(this).animate({width : 300},2000).queue(function(next){

            var This = this;

            var timer = setInterval(function(){

                This.style.height = This.offsetHeight + 1 + 'px';

                if( This.offsetHeight == 200 ){

                    next();

                    clearInterval(timer);

                }

            },30);

        }).animate({left : 300},2000); 

    });

    -------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $.queue( document , 'q1' , aaa );

    $.queue( document , 'q1' , bbb );

    $.queue( document , 'q1' , [ccc] );//ccc是数组时候覆盖aaa,bbb

    console.log(   $.queue( document , 'q1')  );

    $.dequeue( document , 'q1' );//出队时候函数aaa要执行一次

    ----------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $(document).queue('q1',aaa);

    $(document).queue('q1',bbb);

    console.log( $(document).queue('q1') );//查看[function, function]0:function aaa()1:function bbb()

    $(document).dequeue('q1');

    $(document).dequeue('q1');

});

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{ width:100px; height:100px; background:red; position:absolute;}

</style>

<script src="jquery-2.0.3.js"></script>

<script>

//delay() : 延迟队列的执行

$(function(){

    $('#div1').click(function(){

        $(this).animate({width : 300},2000).animate({left : 300},2000);

        $(this).animate({width : 300},2000).delay(2000).animate({left : 300},2000);

        //队列全部执行完之后，再去调用

        $(this).promise().done(function(){

            alert(123);

        });

    });

});

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

jquery12 queue() : 队列方法的更多相关文章

  1. jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理

    //对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...

  2. stack堆栈容器、queue队列容器和priority_queue优先队列容器（常用的方法对比与总结）

    stack堆栈是一个后进先出的线性表,插入和删除元素都在表的一端进行. stack堆栈的使用方法: 采用push()方法将元素入栈: 采用pop()方法将元素出栈: 采用top()方法访问栈顶元素: ...

  3. 8.12 day31 进程间通信 Queue队列使用 生产者消费者模型 线程理论 创建及对象属性方法 线程互斥锁 守护线程

    进程补充 进程通信 要想实现进程间通信,可以用管道或者队列 队列比管道更好用(队列自带管道和锁) 管道和队列的共同特点:数据只有一份,取完就没了 无法重复获取用一份数据 队列特点:先进先出 堆栈特点: ...

  4. python并发编程-进程间通信-Queue队列使用-生产者消费者模型-线程理论-创建及对象属性方法-线程互斥锁-守护线程-02

    目录 进程补充 进程通信前言 Queue队列的基本使用 通过Queue队列实现进程间通信(IPC机制) 生产者消费者模型 以做包子买包子为例实现当包子卖完了停止消费行为 线程 什么是线程 为什么要有线 ...

  5. C++ 标准模板库STL 队列 queue 使用方法与应用介绍

    C++ 标准模板库STL 队列 queue 使用方法与应用介绍 queue queue模板类的定义在<queue>头文件中. 与stack模板类很相似,queue模板类也需要两个模板参数, ...

  6. C#基础---Queue(队列)的应用

       Queue队列,特性先进先出. 在一些项目中我们会遇到对一些数据的Check,如果数据不符合条件将会把不通过的信息返回到界面.但是对于有的数据可能会Check很多条件,如果一个数据一旦很多条件不 ...

  7. atitit. java queue 队列体系and自定义基于数据库的队列总结o7t

    atitit. java queue 队列体系and自定义基于数据库的队列总结o7t 1. 阻塞队列和非阻塞队列 1 2. java.util.Queue接口, 1 3. ConcurrentLink ...

  8. C#部分---特殊集合：stack栈集合、queue队列集合、哈希表集合。

    1.stack栈集合:又名 干草堆集合 栈集合 特点:(1)一个一个赋值 一个一个取值(2)先进后出实例化 初始化 Stack st = new Stack(); //添加元素用push st.Pus ...

  9. Python自动化运维之16、线程、进程、协程、queue队列

    一.线程 1.什么是线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行 ...

随机推荐

  1. Square roots

    Loops are often used in programs that compute numerical results by starting with an approximate answ ...

  2. SecondaryNameNode合并元信息过程

  3. jqueryValidator自定义校验规则的一种方式（不覆盖源码）

    1.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  4. Studio3T 破解，无需命令计划任务

    最近项目中使用到了MongoDB,苦于命令行不好操作,所以就寻觅了一下MongDB的GUI管理工具,最终找到了Studio3T,功能非常强大,但是苦于只有评估版本30天,最可气的是一时手贱,修改了系统 ...

  5. 使用GitHub+Hexo建立个人网站，并绑定自己的域名（Ubuntu环境下）

    参考链接: youngzn.github.io     hexo官网     博客:从jekyll到hexo    hexo建站小结  全过程  简洁过程 使用GitHub+Hexo建立个人网站,并绑 ...

  6. HDU 4960 Another OCD Patient 简单DP

    思路: 因为是对称的,所以如果两段是对称的,那么一段的前缀和一定等于另一段的后缀和.根据这个性质,我们可以预处理出这个数列的对称点对.然后最后一个对称段是从哪里开始的,做n^2的DP就可以了. 代码: ...

  7. ArcGIS api for javascript——渲染-使用分级渲染

    描述 本例使用一个分级渲染通过人口密度用符号表示Kansas.代码明确地增加类并为每一个定义颜色.使用ClassBreaksRenderer.addBreak()方法定义类,参数是在类中包含的最大值和 ...

  8. 基于请求响应的MVC框架调用分析

    一.使用Servlet来处理请求响应 当client提交数据之后.接着发送请求,请求被封装成对象,server接收到请求,依据请求的URL.来推断将请求对象交由哪个Servlet处理. 在servle ...

  9. iOS开发之软键盘使用小技巧

    在iOS开发过程中,有时候须要弹出软键盘进行输入,有时候又须要在某些情况下隐藏软键盘,以提高用户体验. 今天有几个关于软键盘的小技巧和大家分享. (1)仅仅弹出数字键盘 有某些需求中,要求用户仅仅能在 ...

  10. [LeetCode]Single Number 异或的妙用

    1.数组中仅仅有一个元素仅仅出现一次,其余出现偶数次. 利用异或中同样元素相互抵消的方式求解. 2.数组中仅仅有2个元素仅仅出现一次.其余出现偶数次. class Solution { public: ...