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的快速片段：

<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功能。现在试一试。

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

1 个答案: