특정 순서로 jQuery 페이드 인

Question

여러 아코디언 블레이드 내부에서 하나씩 이미지를 페이딩하는 jQuery 코드가 있습니다. 새 블레이드를 클릭 할 때마다 새로운 이미지 세트가 왼쪽에서 오른쪽으로 하나씩 사라지기 시작합니다. 그러나 버튼을 빠르게 클릭하면 이미지가 오른쪽에서 오른쪽으로 나타나는 대신 덩어리로 나타나기 시작하면서 버그가 생성됩니다. 플러그인은 http://preview.hyc.com/hy/process/process.html입니다. 새 탭을 클릭 할 때마다 새로운 페이드 인 이미지 세트가 재설정되므로 왼쪽에서 오른쪽으로 순차적으로 페이드 인하 기 시작합니다.

그리고 내가 사용하고있어 jQuery 코드는 다음과 같습니다

$(document).ready(function(i) { 
    $(".box").hide(); 
    var currentBox = $(".container :first-child"); 
    fadeMyBoxes(currentBox); 

    function fadeMyBoxes(thisbox){ 
     thisbox.fadeIn(2000); 
     if (thisbox.is(":last-child")){ 
      clearTimeout(t); 
     } 
     else { 
      var t =setTimeout(function(){fadeMyBoxes(thisbox.next());},500); 
     } 
    }; 

    $("#thetabs ul li").mouseup(function(i) { 
     $(".box").hide(); 
     var currentBox = $(".container :first-child"); 
     fadeMyBoxes(currentBox); 
     function fadeMyBoxes(thisbox){ 
      thisbox.fadeIn(2000); 
      if (thisbox.is(":last-child")){ 
       clearTimeout(t); 
      } 
      else { 
       var t =setTimeout(function(){fadeMyBoxes(thisbox.next());},500); 
      } 
     }; 
    }); 
}); 

Answer 1

대답은 체인이 아닌 제한 시간을 사용하여 거짓말을 할 수 있습니다. jQuery 애니메이션에는 애니메이션 완료시 실행되는 기능이 있습니다.

function fadeChain(elem) { 
    if(elem) { 
     $(elem).fadeIn('slow', function() { 
      fadeChain($(this).next()); 
     }); 
    } 
} 
fadeChain($('#image1')); 

증거는 바이올린에 있습니다 http://jsfiddle.net/EcaYt/