Javascript 使用jQuery交叉淡入两个div

我在一个网站上有一个多步骤的网络表单。当一个人单击“下一步”时，div one将淡出，div two将淡入。我所看到的问题是，当一级消失时，二级消失在一级下面，然后在一级消失后跳转

我如何防止这种情况，并让它们真正交叉褪色

HTML

试试这个：

$( ".step-1-next" ).on( "click", function() {
    $( ".step-1" ).fadeOut( "slow", function(){
       $( ".step-2" ).fadeIn( "slow" );
      });
    });

这将导致淡入等待调用，直到淡出完成。

工作示例

step-2

div在s

tep-1

完全隐藏后跳入

step-1

位置的原因是定位。或者没有。为此，您必须使用

绝对位置

，或

固定位置

。我在为您创建的示例中使用了绝对值

.step-1 {
    background: blue;
    top: 20px;
    left: 20px;

}

.step-2 {
    background: red;
    display: none;
    top: 130px;
    left: 20px;
}

div {
    width: 100px; 
    height: 100px;
    margin: 20px;
    position: absolute;
}

button {
    position: absolute;
    right: 50px;
    top: 0;
}

---

@斯诺伯恩-你应该把你的答案转寄出去。你的答案很有效，而且看起来比另一个更好。完成后，另一个帖子相当不错，如果你调整他的小提琴，使两个顶部都是相同的，那么这两个顶部将与另一个同时消失，并占据相同的空间。我的将迫使第二个在调用fadeIn之前等待fadeOut的回调。@snowburn-同意，但这在我的案例中造成了问题，尽管我不确定为什么。即使暂停，您的解决方案也很有效。当div为position

left时：0；排名：0它导致了奇怪的行为，但它仍然跳了一些。@Lynda确保你有
位置：绝对，如果您有任何边距或填充，这可能会影响它。不确定问题是什么。知道这一点很好，但这不是交叉衰退；它只是淡出一个元素，然后淡入一个元素。我从来没有想过交叉淡出在同时进行时看起来是正确的
$( ".step-1-next" ).on( "click", function() {
    $( ".step-1" ).fadeOut( "slow", function(){
       $( ".step-2" ).fadeIn( "slow" );
      });
    });

.step-1 {
    background: blue;
    top: 20px;
    left: 20px;

}

.step-2 {
    background: red;
    display: none;
    top: 130px;
    left: 20px;
}

div {
    width: 100px; 
    height: 100px;
    margin: 20px;
    position: absolute;
}

button {
    position: absolute;
    right: 50px;
    top: 0;
}