将jQuery delay（）与单独的元素一起使用

我想通过依次显示几个PNG来模拟页面加载中的一个简单动画，每个PNG立即出现，但在下一个PNG出现之前具有唯一的、精确计时的延迟。使用jQuery的最新版本（编写时为1.4.2），它提供了一种延迟方法。我的第一个（脑死亡）冲动是：

$('#image1').show('fast').delay(800);
$('#image2').show('fast').delay(1200);
$('#image3').show('fast');

当然，所有这些都是同时出现的。jQuery文档示例指的是链接的单个项目，而不是处理多个项目。好啊请使用show（）中的嵌套回调重试：

看起来很难看（想象一下做10次，还想知道处理器命中率会是多少），但嘿，它是按顺序工作的！不过，毫不拖延。所以show（）之后使用回调函数的chain delay（）（甚至不确定它是否支持回调函数）：

---

嗯，我认为可能发生的事情的相反结果是：回调有效，但仍然没有延迟。所以我应该使用队列和延迟的组合而不是嵌套回调吗？队列的jQuery文档示例再次仅使用一个元素作为示例。猜测这将涉及使用自定义队列，但我不确定如何实现这一点。或者我错过了一个简单的方法？（对于一个简单的问题！）

这里是胡乱猜测，但是关于

$('#image1').show('fast', function() {
    $('#image2').delay(800).show('fast', function() {      
        $('#image3').delay(1200).show('fast', function() {      
        });
    });
});

---

使用jQuery直接实现这一点可能是一种流行的方法，但我倾向于使用简单的数组和简单的超时机制

var toShow = ["image1", "image2", "image3", ... ], index = 0;
setTimeout(function() {
  $('#' + toShow[index++]).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, 1000);
}, 1000);

如果不希望“延迟”值始终相同，也可以将其放入数组中：

var toShow = [ {img: "image1", delay: 800}, {img: "image2", delay: 1200}, ... ],
  index = 0;
setTimeout(function() {
  $('#' + toShow[index].img).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, toShow[index].delay);
}, toShow[0].delay);

编辑这很有趣：-）如果愿意，可以将图像数组构建为jQuery对象-换句话说，可以将图像放入HTML中，然后使用jQuery选择器“查找”它们。至于延迟值，如果您想使延迟成为每个图像的事情，您可以使用jQuery“metadata”插件或更简单的hack将其编码到图像类名中，如果您不需要任何其他东西的详细说明：

var toShow = $('img.showMeSlowly'), index = 0, getDelay = function(img) {
  var delay = 1000;
  $(img).attr('class').replace(/.*\bdelay:(\d+)\b.*/, function(_, ds) {
    delay = parseInt(ds, 10);
  });
  return delay;
};

setTimeout(function() {
  toShow.eq(index++).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, getDelay(toShow.get(index)));
}, getDelay(toShow.get(0)));

---

如果它们在一起，你可以简化它：

function showNext(img) {
  //show, find next image, repeat, when next doesn't find anything, it'll stop
  img.show('fast', function() { showNext($(this).next('[id^=image]')); });
}
//Call the first image to start the chain
showNext($("#image1"));

---

如果它们相距较远，只需调整

.next（）

选择器，以确定如何查找下一个图像，或者您可以为它们分配一个类，等等。但是，您可以遍历到下一个图像。

使用队列非常简单：

var imgs = ['#image1','#image2','#image3',...];

function showNext() {
  var img = imgs.shift();
  if (img) $(img).show('fast', showNext);  
}

showNext(); // start

---

我对这里给出的奇怪的答案感到有点惊讶。这个问题有点老了，但我想其他人仍然会搜索并找到它，所以让我们开始：

首先，delay（）不接受回调函数。如果要延迟任何操作，必须将delay（）放在操作前面的点符号链中：

$('#image1').delay(800).show('fast');

这将等待0.8秒，然后快速显示图像（持续时间“快速”=0.2秒）

其次，如果要同时运行多个动作，只需依次编写它们：

$('#image1').show('fast');
$('#image2').show('fast');

这样，它们将同时启动，因此上面的代码将并行播放#image1和#image2的淡入动画

如果要以不同的延迟启动多个动画，请结合这两种策略，只需执行以下操作：

$('#image1').show('slow');
$('#image2').delay(1000).show('slow');
$('#image3').delay(1600).show('slow');
$('#image4').delay(2000).show('slow');

根据延迟和持续时间，这允许您播放动画，动画之间有间隙（2个在1完成后延迟开始），连续播放（3个在2刚刚完成时开始，持续时间“慢”为600毫秒），延迟但重叠播放（4个在3仍在运行时开始）。你所要做的就是调整你的延迟和持续时间。这实际上是你问题的答案，也是做你想做的事情最通用的方法

关于回调函数的一点说明：show（）、animate（）和其他几种方法都可以使用该函数（但您尝试过延迟），如果您想在动画完成后执行更复杂的操作，则主要需要该函数。但是要小心：当选择器匹配多个元素时，例如，

$（'#image1，#image2'）

，回调将被调用多次（！）次—对集合中的每个元素调用一次。这可能会导致非常意外的结果（快速提示：查找有关jQuery的when（）/then（）方法的信息以避免出现这种情况）

最后，为了完整性起见，如果您只想在同一元素上运行多个动画——一个接一个的动画，并且在这两个动画之间可能会有延迟，您只需执行以下操作

$('#image1').show('fast').hide('slow').delay(500).show('slow').hide('fast');

---

这将快速显示图像，然后缓慢隐藏图像，然后等待半秒钟，然后缓慢显示图像，然后快速隐藏图像。

您的胡乱猜测效果很好！现在语法对我来说很明显。（在检查之前等待其他可能避免嵌套的解决方案，将在今天晚些时候回顾。）谢谢！谢谢你。我想下面的海报给出了我想要的（我在游泳池的浅水区！）。这比我预期的要多，稍后将进行复查。

$('#image1').show('slow');
$('#image2').delay(1000).show('slow');
$('#image3').delay(1600).show('slow');
$('#image4').delay(2000).show('slow');

$('#image1').show('fast').hide('slow').delay(500).show('slow').hide('fast');