Question

我已经使用jQuery queue / dequeue编写了一个功能不正常，但我无法弄清楚原因。看看这里：

http://codepen.io/ProfessorSamoff/pen/XbVRKg

如果你看一下这个函数的结尾，就会有一个被注释掉的部分：

/*$('.msg').delay(2000, 'timer').queue('timer', function(){ 
 $(this).empty().fadeIn(5).append('GO!');
}).dequeue('timer');*/

通过这个注释，脚本运行正常，使用fadeIn（）函数等从3倒数到1但是当我取消注释最后一部分时，函数从2开始计数而不是3和fadeIn（）时机关闭。

我在这里缺少什么？这是一个蹩脚的错误还是队列/出队功能本身就存在错误？

＆＃13;

/*var go = Math.floor(Math.random() * 5000) + 500;
console.log(go);*/

$('.start').click(function() {
   $('.start').remove();
   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(200).append('3').delay(1000).fadeOut(500);
   }).dequeue('timer');

   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
      $(this).empty().fadeIn(200).append('2').delay(1000).fadeOut(500);
   }).dequeue('timer');

   $('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(200).append('1').delay(1000).fadeOut(500);
   }).dequeue('timer');
   
/*$('.msg').delay(2000, 'timer').queue('timer', function(){ 
     $(this).empty().fadeIn(5).append('GO!');
   }).dequeue('timer');*/
});

＆＃13;

body {
   font-family: Arial, sans-serif;
   margin: 3em;
}
.start {
   display: block;
   margin: 0 auto;
   padding: 1em 2em 0.8em 1.9em;
   font-weight: bold;
   background: limegreen;
   border: 1px solid #777;
   border-radius: 10px;
}
.start:hover {
   background: lightgreen;
}
.msg {
   text-align: center;
   font-size: 3em;
   font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="start">Start</button>
<p class="msg"></p>

＆＃13;

Answer 1

/*var go = Math.floor(Math.random() * 5000) + 500;
console.log(go);*/

$('.start').click(function() {

   $('.start').remove();
   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(200).append('3').delay(1000).fadeOut(500);
     next();
   })

   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
      $(this).empty().fadeIn(200).append('2').delay(1000).fadeOut(500);
      next();
   })

   $('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(200).append('1').delay(1000).fadeOut(500);
     next();
   })

$('.msg').delay(2000, 'timer').queue('timer', function(next){ 
     $(this).empty().fadeIn(5).append('GO!');
       next();
   })

.dequeue( 'timer' );
});

在这里试试这个

jQuery queue / dequeue的问题......

1 个答案: