jquery - 嵌套的 jquery 队列不运行

Question

console.dir 线永远不会运行的任何原因？我可以嵌套队列吗？

  //Rotate letter W to M of Wovi.es
  $(".logo a span").delay(5000).queue(function(){
    $(this).addClass("rotate").delay(400).queue(function(){
      //$(this).removeClass("rotate");
      console.dir($(this)); // This never runs
    });
  });

我可以看到的明显解决方法就是拥有两个独立的功能，如下所示：

  //Rotate letter W to M of Wovi.es
  $(".logo a span").delay(5000).queue(function(){
    $(this).addClass("rotate");
  });
  $(".logo a span").delay(5400).queue(function(){
    $(this).removeClass("rotate");
  });

但是为什么第一个不起作用呢？

ps 实际上我的第二个代码也不起作用。

Answer 1

$("#test").delay(5000).queue(function(){
    var $this = $(this);

    $(this).addClass("rotate").delay(1400).queue(function(){
        $this.removeClass('rotate');
    }).dequeue();
});

http://jsfiddle.net/BhpfX/

请注意，我在内部延迟上将其更改为 1400，因此更明显。

Answer 2

dequeue是处理多个队列时的关键。

来自 jQuery 文档：

当调用 jQuery.dequeue() 时，队列中的下一个函数从队列中移除，然后执行。这个函数应该反过来（直接或间接）导致 jQuery.dequeue() 被调用，以便序列可以继续。

$('.logo').delay(500).queue(function(){
    $(this).addClass('rotate').delay(1000)
      .queue(function(next) {
       alert('working');      
    }).dequeue();
});

工作演示