Question

我使用onclick运行的函数来读取xml目录并打开每个商品的缩略图。

我希望脚本能够按顺序打开每个拇指。从逻辑上讲，我觉得它应该这样做，因为show命令在for循环结束时。但是该功能运行并且所有缩略图同时显示。我怎么能改变这个？为什么会这样？

function showproductthumbnails() {

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

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

}

}

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

Answer 1

我该如何更改？

您可以添加一个小delay ^[docs]：

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

为什么会这样？

循环非常快，并且调用此show不会阻塞。动画功能异步。

Answer 2

你面临的问题是show - 就像所有jQuery动画函数一样 - 是异步的。调用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 3

一个技巧是将自定义事件绑定到每个缩略图。让事件为其绑定的缩略图运行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 4

$.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，等等。

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

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

Answer 5

我看到已经有基于jQuery的答案了，所以根据我的评论，这是一个使用超时的更基本的版本：

http://jsfiddle.net/n6A9B/1/

$(document).ready(function (e) {
    var imgSrc = "http://bits.wikimedia.org/skins-1.17/vector/images/search-ltr.png?301-3";
    var thumbnails = [];
    for (var i = 0; i < 20; i++) {
        thumbnails.push(imgSrc);
    }

    function showThumbnails(thumbnails, i) {
        if (i >= thumbnails.length) {
            return;
        }
        $(document.body).append($("<img src=" + thumbnails[i] + "/>"));
        setTimeout(function () {
            showThumbnails(thumbnails, i+1);
        }, 100);
    }

    showThumbnails(thumbnails, 0);
});

Answer 6

这是一种不同的方法，它使用.show()函数的完成函数来启动下一个函数。

function showproductthumbnails() {
    var cntr = 0;
    function showNext() {
        if (cntr < xmlcatalog.length) {
            $(catalogitem+cntr).show(300, "fold", showNext);
            ++cntr;
        }
    }
    showNext();
}

这是第一次显示并设置一个完成功能，它将启动下一个，当cntr达到极限时它将停止。这可以保证它们按顺序相互跟随。

从函数中依次显示$（）

6 个答案: