javascript - 如何使用 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

分配方法 toggle () 的属性 display 不能使用 CSS 转换动画。也许您想看看 fadeIn() 和 fadeOut()。

编辑

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

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

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

---

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