<!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. springboot 测试类，项目使用shiro时报错UnavailableSecurityManagerException

    大概的问题就是,正常运行项目是没有问题的 使用测试类是,加载不了shiro的securityManager,主要导致不是很清楚,望告知, 解决方法 @Resource org.apache.shiro ...

  2. CSS提高渲染速度的写法

    写CSS的习惯,决定页面渲染速度的快慢,这一点在脑残的IE里更加明显.养成良好的习惯,乃至形成规范,会让你的页面更快速的加载,用户体验度更高,下面是零度逍遥总结的一些提高CSS渲染速度的写法,供大家参 ...

  3. 2.LINUX常用命令

    Linux 必备指令摘要一般用户指令/bin 指令 功能说明 范例 bash GNU Bouren-Again Shell bash shell_script cat 观看一般文本文件 cat fil ...

  4. 网络流Dinic算法模板 POJ1273

    这就是以后我的板子啦~~~ #include <queue> #include <cstdio> #include <cstring> #include <a ...

  5. 安装meteor运行基本demo发生错误。

    bogon:~ paul$ curl https://install.meteor.com/ | sh % Total % Received % Xferd Average Speed Time Ti ...

  6. 2018年湘潭大学程序设计竞赛 maze(bfs)

    链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...

  7. appium使用教程(二)-------------连接手机

    1. 安装驱动 说明:如果驱动装不上,可以使用第三方的工具去安装.(一般来说还是用第三方) 大概就是这个样子索. 2. 开启usb调试 1)开发者选项打开(不知道怎么打开的问度娘) 2)开启USB调试 ...

  8. Xshell6连接Ubuntu18.04

    1.首先在自己windows10电脑上安装了xshell6,安装过程不叙述了 2.打开xshell 3.执行新建命令.打开Xshell软件后找到左上角第一个“文件”菜单并单击,弹出来一个下拉框,点击选 ...

  9. opencv——图像的灰度处理（线性变换/拉伸/直方图/均衡化）

    实验内容及实验原理: 1.灰度的线性变换 灰度的线性变换就是将图像中所有的点的灰度按照线性灰度变换函数进行变换.该线性灰度变换函数是一个一维线性函数:f(x)=a*x+b 其中参数a为线性函数的斜率, ...

  10. Intel投入5亿美元提升14nm工艺CPU需求

    虽然14nm行将收尾,但是却有大量的客户在赶“末班车”,导致CPU供货告急. Intel年初宣布增加10亿美元的额外资本支出用于转向更新的.更先进的生产工具,以便增加产能,在本周的第39届纳斯达克投资 ...