jquery12 queue() : 队列方法

Posted 672530440

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery12 queue() : 队列方法相关的知识,希望对你有一定的参考价值。

<!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() : 队列方法的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

深入学习jQuery动画队列

jQuery源代码解析—— ready载入queue队列

jQuery 源码分析 队列模块 Queue详解

jQuery 队列控制函数:.queue()

jquery源码学习笔记(二十四)