如何使用CSS3过渡

Question

我有以下HTML:

<div id="welcome-content">
 // Code
</div>
<div id="configure-content" style="display:none">
 // Code
</div>

和(工作)jquery在它们之间切换:

$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();        
});

我想在我们之间切换时使用CSS3来创建淡入淡出效果.我尝试过以下方法:

#welcome-content, #configure-content{
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    -khtml-transition: all 400ms;
}

但是,不会发生动画.我究竟做错了什么？

Answer 1

display分配该方法的属性toggle ()无法使用 CSS 过渡进行动画处理。也许您想看看fadeIn()和fadeOut()。

编辑

我发现了另一种方法fadeToggle()我对此不太了解，但您可以搜索并使用它：

$('.back-fade').click(function(){
  $('#welcome-content').fadeToggle(2000);
  $('#configure-content').fadeToggle(2000);        
});

检查此演示http://jsfiddle.net/8urRp/14/ *

*_{我用绝对位置制作了div以将它们保持在同一空间上}