jquery 的队列queue

使用示列代码：
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>测试 jquery 的队列queue的使用</title>

     <script src="../Js/jquery-1.9.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         function TestQueue(sender) {

             var loading = $('<span id="loading" class="checkout-state">准备执行队列.....</span>');

             var originObj = $(sender).clone(true);  //克隆当前对象，相当于 存储一个当前对象的副本

             //lock

             $(sender).fadeOut('slow', function () {

                 $("#loading").replaceWith(originObj);  //替换其元素

                 $(this).replaceWith(loading).queue(function (next) {//进入Jquery队列执行

                     console.log("队列任务");

                     $("#loading").html("<b></b>队列执行成功, 请稍后..").animate({ opacity: 1.0 }, 1000).fadeOut("slow", function () {  //队列处理完成后 执行方法

                         console.log("完成执行队列任务");

                     });

                     $("#loading").fadeOut('slow', function () {  //（执行失败！）还原当前对象，（就是上面克隆的副本进行还原）

                         $("#loading").replaceWith(originObj);

                         $(sender).fadeIn('slow');

                     });

                     next();

                 });

             });

         }

         $(function () {

             $("#queueTest").click(function () {

                 TestQueue(this);

             });

         });

     </script>

 </head>

 <body>

     <div id="queueTest">

         <h1>

             测试队列</h1>

     </div>

 </body>

 </html>
秒客网

jquery 的队列queue

相关文章
