Задержка перехода Css3

Я пытаюсь сделать последовательную задержку для перехода непрозрачности:

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

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

Теперь все сразу исчезают, я хочу, чтобы последовательное исчезновение.

Возможно ли это с помощью css?

1 ответ

Да, это возможно.

Вы можете использовать свойство задержки перехода: http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

HTML:

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/

Чтобы он работал над 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/

licensed under cc by-sa 3.0 with attribution.