Question

我在jQuery中使用多个队列时遇到问题。请考虑以下示例：

$('#example').click(function() {
  $(this).delay(1000, 'fx2').queue('fx2', function() {
    alert('here');
  });
});

警报永远不会触发。为什么呢？

Answer 1

在自定义队列上调用delay（或任何其他动画）时，您需要先使用.dequeue()

设置该队列。

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

$('#example').click(function() {
  $(this).delay(1000, 'fx2').queue('fx2', function(next) {
    alert('here');
    // start the next anim in the queue...
    next();
  }).dequeue('fx2');
});

jsbin preview

请注意queue上的回调接收函数作为其第一个参数。这是您在“动画”完成时要调用的函数，以便队列中的下一个项目可以执行。

jQuery代码处理$.fn.queue() function中的fx队列'自动启动'：

if ( type === "fx" && queue[0] !== "inprogress" ) {
  jQuery.dequeue( this, type );
}

Answer 2

尝试以下jsFiddle示例。它似乎工作并做你想做的事。

jQuery中的多个队列

2 个答案: