jquery12 queue() : 隊列方法
阿新 • • 發佈：2017-06-02
har set end 列名 () 函數 rip mis 隊列
<!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() : 隊列方法