Question

我想在页面加载时伪造一个简单的动画，通过顺序显示几个png，每个png立即出现，但在下一个之前具有唯一的，精确定时的延迟。使用最新版本的jQuery（写作时为1.4.2），它提供了一种延迟方法。我的第一个（脑死亡）冲动是：

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

当然所有人都会同时出现。 jQuery doc示例指的是被链接的单个项目，而不是处理多个项目。好的...再次尝试使用show（）的嵌套回调：

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

看起来很丑陋（想象一下做10，也想知道什么是处理器命中）但嘿，它按顺序工作！尽管如此。所以... show（）之后的链延迟（）使用它的回调函数（甚至不确定它是否支持）：

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

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

Answer 1

如果他们在一起就可以简化它：

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()选择器以查找下一个图像，或者您可以为它们分配一个类等等...但是您可以遍历到下一个图像。

Answer 2

疯狂猜测，但

怎么样

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

Answer 3

可能有一种流行的方式直接用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“元数据”插件或更简单的黑客代码将其编码到图像类名称中，如果你不需要任何东西详细说明其他内容：

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)));

Answer 4

使用队列非常简单：

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

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

showNext(); // start

Answer 5

我对这里给出的疲惫答案感到有些惊讶。这个问题有点老了，但我猜其他人仍然会搜索并发现这个问题，所以让我们走吧：

首先，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个完成后延迟），连续播放（2个刚完成时开始3个，持续时间'慢'是600毫秒）并延迟但有重叠（4开始，而3仍在运行）。您所要做的就是调整延迟和持续时间。这实际上是你的问题的答案，也是你做你想做的最通用的方法。

关于回调函数的一句话：这可用于show（），animate（）和其他几种方法（但没有延迟，因为你试过它！）并且主要需要你想要在动画结束后做更复杂的事情。但请注意：当您的选择器匹配多个元素时，例如$('#image1, #image2')，回调将被调用多次（！）次 - 对于集合中的每个元素都会调用一次。这可能会导致非常意外的结果（快速提示：查找有关jQuery的when（）/ then（）方法的信息以避免这种情况。）

最后，为了完整起见，如果您只是想在相同元素上运行多个动画 - 一个接一个的动画，可能会延迟中间 - 你可以简单地做......

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

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

使用带有单独元素的jQuery delay（）

5 个答案: