jquery 的队列queue
使用示列代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>测试 jquery 的队列queue的使用</title> 5 <script src="../Js/jquery-1.9.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 function TestQueue(sender) { 8 var loading = $('<span id="loading" class="checkout-state">准备执行队列.....</span>'); 9 var originObj = $(sender).clone(true); //克隆当前对象，相当于 存储一个当前对象的副本 10 //lock 11 $(sender).fadeOut('slow', function () { 12 $("#loading").replaceWith(originObj); //替换其元素 13 $(this).replaceWith(loading).queue(function (next) {//进入Jquery队列执行 14 console.log("队列任务"); 15 16 $("#loading").html("<b></b>队列执行成功, 请稍后..").animate({ opacity: 1.0 }, 1000).fadeOut("slow", function () { //队列处理完成后 执行方法 17 console.log("完成执行队列任务"); 18 }); 19 20 21 22 $("#loading").fadeOut('slow', function () { //（执行失败！）还原当前对象，（就是上面克隆的副本进行还原） 23 $("#loading").replaceWith(originObj); 24 $(sender).fadeIn('slow'); 25 }); 26 27 next(); 28 }); 29 }); 30 } 31 32 $(function () { 33 $("#queueTest").click(function () { 34 TestQueue(this); 35 }); 36 }); 37 </script> 38 </head> 39 <body> 40 <div id="queueTest"> 41 <h1> 42 测试队列</h1> 43 </div> 44 </body> 45 </html>
