使用 jQuery 交叉淡入淡出两个 div

Question

我在网站上有一个多步骤的网络表单。当一个人单击下一个时，div one 会淡出，因为div 2 会淡入。我看到的问题是，当div one 淡出时，div 2 淡入div 1 下方，然后在div one 淡出后跳跃。

我如何防止这种情况并让它们实际交叉淡入淡出？

.HTML

<div class="step-1"> 
  <!-- CODE -->
</div >
<div class="step-2"> 
  <!-- THIS DIV IS HIDDEN TO BEGIN WITH -->
</div >

.JS

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

Answer 1

试试这个：

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

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

Answer 2

工作示例 http://jsfiddle.net/JUMJY/

一旦 s tep-1 完全隐藏，step-2div 就会跳入step-1位置的原因是因为定位。或缺乏。为此，您必须使用 position absolute 或 position fixed 。我在为您创建的示例中使用了绝对值。

.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;
}