延迟的奇怪行为？

Question

在下面的代码中，页面将淡入，然后它会淡入左侧的列表项，然后它会在右侧的每个缩略图中淡入淡出。但由于我使用.delay（），它最终会跳过部分或全部缩略图的加载。除了.delay（）之外还有什么别的东西可以用来在它们开始之前停止拇指的执行吗？

//Showcase
    $('#showcase').animate({'opacity' : 0}, 0);
    fadeInDivs(['#showcase']);
    function fadeInDivs(els) {
        e = els.pop();
        $(e).   delay(750).animate({'opacity' : 1}, 1000, function(){
            if (els.length) fadeInDivs(els);
        });
    };

    $('#showcase').queue(function(){

        //fade in each filter
        $('#filters li').each(function(i, item) {
            setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 50 * i);
        });

        //fade in each thumbnail
        $('.thumb').delay(1000).each(function(i, item) {
            setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
        });
    });

Answer 1

试试这个fiddle。我想这就是你要找的东西。如果不是，请告诉我。这是jQuery代码：

    $('#showcase').queue(function() {
    var i = 0;
    var length = $('#filters li').length;
    //fade in each filter
    $('#filters li').each(function(i) {

        //alert(i);
        $(this).delay(750*i).animate({
            'opacity': 1
        }, 1000, function() {
            if (i == length) {
                //fade in each thumbnail
                $('.thumb').each(function(i) {
                    $(this).delay(750 * i).animate({
                        'opacity': 1
                    }, 1000);
                });
            }
        });
        i++;
    });

});