从函数中顺序显示$()

Question

我使用onclick运行的函数读取xml目录，并为每个目录条目打开一个缩略图。

我想让脚本按顺序打开每个拇指。从逻辑上讲，我认为它应该这样做，因为show命令位于for循环的末尾。但函数运行时，所有的缩略图都会同时显示。我怎样才能改变这一点？这一切为什么要发生？

function showproductthumbnails() {

for (i=0;i<xmlcatalog.length;i++){ 

$(catalogitem+i).show("fold", {size:3}, 300);   

}

}

请注意，上面的代码只是去掉了肉的摘要，但问题仍然存在。

Answer 1

您面临的问题是，与所有jQuery动画函数一样，show也是异步的。调用show将指令发送到队列，然后立即返回。因此，您同时对所有元素调用show。

解决这个问题的方法是使用delay函数。这会增加效果队列的延迟。需要用300乘以i (循环中的位置)来延迟动画。

$(catalogitem+i).delay(i * 300).show("fold", {size:3}, 300); 

这意味着第一个项目的动画将延迟0 * 300 ms (0ms)，第二个项目的动画延迟1 * 300 ms (300ms)，第三个项目的动画延迟2 * 300 ms (600ms)，依此类推。

Answer 2

一个技巧是将自定义事件绑定到每个缩略图。让事件运行它绑定到的缩略图的show()动画，然后在回调时，选择并触发绑定到.next()元素的同名自定义事件。最终效果是一系列show()动画，每个动画调用下一个，直到到达最后一个缩略图。

如下所示：

$('.thumbnail').bind('showme', function(){ // for each thumbnail, bind 'showme'
  $(this).show([your_options], function(){ // thumbnail shows itself
    $(this) // starting here...
    .nextAll('.thumbnail:first') // ...select the next thumbnail
    .trigger('showme'); // ...and trigger the same, recursion-style
  });
})
.first() // then, at the first thumbnail...
.trigger('showme'); // ...start the dominoes falling

Answer 3

$.show()只是启动动画，然后在动画运行时继续执行其他操作。在您的示例中，循环会快速启动所有动画，并且它们都会一起运行。有几个选项可以解决这个问题：

使用setTimeout()延迟每个动画的开始，如下所示：

var animationTime = 300;
for (i=0;i<xmlcatalog.length;i++){ 
    setTimeout( function() { $(catalogitem+i).show("fold", {size:3}, animationTime); }, animationTime*i;
}

第一次通过时，延迟为0ms，第二次为300ms，第三次为600ms，依此类推。

如果不想计算每个动画应该开始的时间，可以使用$.show()的可选callback参数，该参数在动画完成后触发：

function showThumb(i) { // recursively calls each item after the current one is done
    if (i>=xmlcatalog.length) 
        return;
    else
        $(catalogitem+i).show(300, function() { showThumb(i+1); });
}
function showproductthumbnails() {
    showThumb(0);
}