Question

我要做的是清除页面上的html，插入一个div，给它一个背景图像，淡入它，在那里保持几秒钟，淡出它然后返回到前一个HTML。我这样做：

var body_html = $('body').html();

    $('body').queue(function(){
      $(this).empty().css('background-image','none').html('<div class="start-img"></div>');
      $(this).dequeue();
    }).queue(function(){
      $('.start-img').html('<img src="'+url+'public/img/holding.jpg">').fadeIn(1000).delay(10000).fadeOut(500);
      $('.start-img').dequeue();
    }).queue(function(){
      $(this).html(body_html).css('background-image','url("../img/paper-bg.jpg")');
      $(this).dequeue();
    });

我花了大量的时间在谷歌搜索，但这似乎与我见过的例子相符，但它不起作用。 Firebug没有显示任何错误。发生的事情是页面变为空白，背景图像（holding.jpg）淡入大约一秒钟，然后淡化为空白页面。当我查看生成的源时，只有div.start-img以html形式出现。

我之前从未使用过queue（）而且我一定误解了它，但是有人能说明我的意思吗？即使有更好的方法，为什么我的代码不起作用？

Answer 1

我不是jQuery queue方法的专家。（我之前从未使用过它。）但我认为我发现了一些问题：

<强> 1。出列事件必须与启动队列事件

相同的目标配对

所以在第2步中，行：

$('.start-img').dequeue();

应该是：

$(this).dequeue();

<强> 2。您将异步事件视为同步事件

再次在第2步中：您将fadeIn效果链接到链接到fadeOut效果的长延迟。这需要一些时间才能完成。但下一行dequeue调用将立即执行，我预计会立即将队列移至下一步并破坏您的序列。

<强>解决方案

等待任何异步事件完成后再进行dequeue调用以继续下一个队列事件。

这是一个小提琴，展示了您在问题中描述的一系列步骤：http://jsfiddle.net/klenwell/wg4jqdjs/

这是队列代码：

var $newDiv = $('<div />').html('<h4>new block</h4>').hide();

$body
  .queue(function() {
    $body.children().fadeOut(1000, function(){ $body.dequeue(); });  
  })
  .queue(function() {
    $body.append($newDiv);
    $newDiv.fadeIn(1000, function(){ $body.dequeue(); });
  })
  .queue(function() {
    $newDiv.animate({backgroundColor: "red"}, 1500, function(){ $body.dequeue(); });
  })
  .queue(function() {
    setTimeout(function(){ $body.dequeue(); }, 2000);
  })
  .queue(function() {
    $newDiv.fadeOut(1000, function(){ $body.dequeue(); });
  })
  .queue(function() {
    $body.find('h4:eq(0)').fadeIn(1000, function(){ $body.dequeue(); });
  });

注意如何在各种异步事件的完成时回调中进行dequeue调用。

<强>附录

将dequeue调用传递给各种效果回调会更加清晰，如下所示：

$body.children().fadeOut(1000, $body.dequeue);

但不幸的是，这在我的小提琴中引发了错误。

jQuery队列无法正常工作

1 个答案: