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/

要让它适用于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/

Css3转换延迟

1 个答案: