jquery12 queue() : 隊列方法

時間 2019-11-26

標籤 jquery12 jquery queue 隊列方法欄目 JQuery 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。