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>

 

posted @ 2017-06-02 03:40  无天666  阅读(2239)  评论(0)    收藏  举报