jQuery .delay() 计时问题，并非所有动画都有一致的延迟？

Question

我有一段简单的 jQuery 代码，它在单击控件时隐藏一组图库对象，然后逐个显示过滤后的对象。

问题在于某些延迟不一致且时间不均。每次物体开始淡入时延迟都会增加以使它们一个一个出现，但是随机出现的同时出现一个或两个？

代码如下：

$(document).ready(function() {

    var controls = $('#portfolio-nav'); 
    var gallery = $('#gallery');

    $('a', controls).click(function(){

        /* setup variables */
        var nav             = $(this).closest('ul');
        var listItem        = $(this).parent();
        var current         = 'current';
        var classes         = listItem.attr("class").split(/\s/);
        var elementsToShow  = new Array();
        var allElements     = gallery.children();

        /* filter classes to excude .current */
        classes = jQuery.grep(classes, function(value){
            return value != current;
        });
        var sector = classes[classes.length -1];

        /* remove all .current classes */
        nav.children('.current').each(function() {    
            $(this).removeClass('current');
        });

        /* add the .current class to the clicked li */
        $(this).parent().addClass('current');

        /* define which elements to show */
        $(allElements).each(function() {

            var element = $(this);          
            var elementSectors = element.attr("class").split(/\s/);

            if(sector !== 'all'){

                if(jQuery.inArray(sector, elementSectors) !== -1){
                    elementsToShow.push(element);
                }

            } else {
                elementsToShow.push(element);
            }

        });

        /* log the elements */
        //console.log(elementsToShow);

        /* hide/show all the elements */
        animateThem(allElements, elementsToShow);

        /* clear the array for the next click */
        elementsToShow.length = 0;

        return false;
    });

    function animateThem(allElements, elementsToShow){

        $(allElements).fadeOut('fast').delay(200);

        $(elementsToShow).each(function(index) {
            $(this).delay(100*index).fadeIn('normal');
        });

    }

});

这是 html 的快速 sn-p：

<nav id="portfolio-nav">
    <ul>
        <li class="all current"><a href="#all">All</a></li>
        <li class="branding"><a href="#branding">Branding</a></li>
    </ul>
</nav>

<div id="gallery">
    <div class="grid-3 media-holder branding">
        ...
    </div>
    <div class="grid-3 media-holder marketing">
        ...
    </div>
</div>

这可能是一个简单的修复，因为我的 jQuery 不是很好，但如果有人知道为什么会发生这种情况，我很想知道。

干杯，

戴夫

编辑：在声明数组元素时遇到问题，并且出现未声明的错误...在按预期调整其工作后（感谢 Dannie Hansen），如果有人感兴趣，JSFiddle 如下：

http://jsfiddle.net/daveaspinall/8VKad/9/

Answer 1

不完全确定，可能存在某种时间问题。

你为什么不试试使用间隔：

var intCount = 0;
var interval = setInterval(function () {
    if(typeof elementsToShow[intCount] != undefined) {
         if(elementsToShow[intCount] != "fired") {
              elementsToShow[intCount].fadeIn('normal');
              elementsToShow[intCount] = "fired";
              intCount++;
         }
    } else {
    //End of array, clear the interval
         clearInterval(interval);
    }
}, 100);

这就是使用时间间隔对事件进行计时的方法。试一试，如果成功了再报告 :)

Edit1 已编辑以修复错误。 - （感谢 Brighty）

Edit2 修复了fadeIn 功能。现在就试试吧。