CSS3 전환 지연

Question

내가 불투명 전환에 대한 순차적 인 지연 만들려고 노력하고 있어요 :

http://jsfiddle.net/7HgLK/5/

$('.wrapper').children('div').each(function(){ 
    $(this).removeClass('hidden').addClass('visible');    
}); 

지금 그들은 모두 한 번에 페이드, 나는 순차적 페이드를하고 싶습니다.

CSS로 가능합니까?

Answer 1

예 가능합니다. http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

HTML :

<div class="first"></div> 
<div class="second"></div> 
<div class="third"></div> 

CSS :

.first { 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    transition-delay: 0s; 
} 
.second { 
    -webkit-transition-delay: 1s; 
    -moz-transition-delay: 1s; 
    -o-transition-delay: 1s; 
    -ms-transition-delay: 1s; 
    transition-delay: 1s; 
} 
.third { 
    -webkit-transition-delay: 2s; 
    -moz-transition-delay: 2s; 
    -o-transition-delay: 2s; 
    -ms-transition-delay: 2s; 
    transition-delay: 2s; 
} 

http://jsfiddle.net/je9p5/

FO

당신은 전환 지연 속성을 사용할 수 있습니다

자바 스크립트 : R은 n 개의 어린이하려면 당신은과 같이 자바 스크립트를 사용할 필요가

$('.wrapper').children('div').each(function(index, value) { 
    .css('-webkit-transition-delay', index + 's') 
    .css('-moz-transition-delay', index + 's') 
    .css('-ms-transition-delay', index + 's') 
    .css('-o-transition-delay', index + 's') 
    .css('transition-delay', index + 's'); 
}); 

http://jsfiddle.net/4x6wC/