CSS3過渡延遲

Question

我試圖讓不透明度過渡時序延遲：

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

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

現在，他們一下子消失，我想連續褪色。

只用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/

佛[R它n個兒童工作，你必須使用JavaScript像這樣：

的Javascript：

$('.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/