当前位置：首页 > news >正文

jquery 的队列queue

news 来源：原创 2024/4/29 23:31:56

使用示列代码：

 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>