CSS 기반의 페이드 인을위한 jQuery delay와 windowTimeout을 하나씩 차례로 결합합니다.

Question

큰 박쥐를 여기에 스윙하고 개인 프로젝트에서만 현대적으로 움직입니다. 요소는 opacity:0 페이지에로드되고 opacity:1 및 CSS3 전환이있는 클래스가 추가됩니다. 각 요소가 차례로 페이드 인하도록 큐에 넣으려고합니다.

일반적으로 아래 코드를 사용하여 페이드를 지정할 수 있지만 jQuery의 .animate() 방법을 사용하므로 높은 프레임 속도와 CPU 변형을 원합니다.

$('.test').each(function(i) { 
    $(this).delay(i*100).animate({ opacity:1 }, 400); //CPU based! 
}); 

클래스를 추가하는 것은 (우리에게 인간에게) 즉각적인 알 몬스트이므로 효과는 그다지 효과적이지 않습니다.

목표는 클래스가 추가 된 후 원래의 애니메이션과 실질적으로 동일한 시간이 걸리기 때문에 시간 초과를 설정하는 것입니다. setTimeout() 방법은 윈도우에서 실행할 수 있습니다 ... 나는 각 요소의 기능을 지연 일부는 시간을 끊지 addClass() 방법을 줄 수있는 방법

$('.test').each(function(i) { 
    $(this).delay(i*100).setTimeout(function(){ //doesn't work! 
     $(this).addClass('show'); 
    }, 400); 
}); 

: 그리고 여기 내 문제가있다?

$('.test').each(function(i) { 
    var test = $(this); 

    test.delay(i*100,function(){ //I wish! 
     setTimeout(function(){ 
      test.addClass('show'); 
     },400); 
    }); 
}); 

Answer 1

는 다음을 시도해보십시오

$('.test').each(function(i) { 
    var ind = i * 100; 
    var test = $(this); 
    setTimeout(function(){ 
     test.addClass('show'); 
    }, ind); 
}); 

나 :

var $tests = $('.test') 
var len = $tests.length; 
var i = 0; 
var test = setInterval(function(){ 
       $tests.eq(i).delay(i*100).queue(function(){ 
        $(this).addClass('show') 
       }) 
       i++; 
       if (i == len) { 
        clearInterval(test) 
       } 
      }, 400)