jQuery .delay() 타이밍 문제, 일부 애니메이션의 일관된 지연이 있습니까?

Question

나는 컨트롤을 클릭 할 때 갤러리 객체 그룹을 숨기는 jQuery 코드를 가지고있다. 그런 다음 필터링 된 객체를 하나씩 보여준다.

일부 지연은 일정하지 않고 균등하지 않습니다. 지연은 개체가 하나씩 나타나도록하기 위해 흐려지기 시작할 때마다 증가하지만 무작위로 한 번에 하나 또는 두 개의 개체가 동시에 나타납니다.

을 Heres 코드 : Heres는

$(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로의 빠른 조각 : 내 jQuery를 큰 아니지만, 같은

<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> 

그것의 아마 쉽게 수정 사람은 이유를 알고 있다면 왜 내가 이런 일이 일어날 지 알고 싶어.

건배,

데이브

편집 : 배열 요소를 선언하고 (인 Dannie 한센 덕분에) 예상대로 일부 조정의 작업 이후에 선언되지 않은 오류를 ... 얻고 있었다 문제가 있었다, 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); 

:

왜 그것을 간격을 사용하여 시도를 포기하지 않습니다. 시도해보고 다시 작동하는 경우 다시보고하십시오.

편집 1 버그 수정을 위해 수정되었습니다. - (Thanksy Brighty)

편집 2 fadeIn 기능이 수정되었습니다. 지금 시도하십시오.