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