使用jQuery实现两个div之间的淡入淡出效果

Question

我在网站上有一个多步骤的Web表单。当用户点击下一步时，div one淡出，div two淡入。我看到的问题是，当div one淡出时，div two会在div one下面淡入，然后一旦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;
});

- L84

---

@snowburnt - 你应该重新发布你的答案。你的答案运行起来比其他答案更好，而且看起来更棒。 - L84

完成了，另一篇帖子很不错，如果你调整他的小提琴，使两个顶部相同，一个将与另一个同时淡出，它们将占据相同的空间。我的代码会强制第二个等待淡出的回调才会调用淡入。 - Snowburnt

@Snowburnt - 我同意，但在我的情况下它引起了问题，尽管我不确定原因。你的解决方案很好，即使有暂停也能正常工作。 - L84

Answer 1

试试这个：

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

这将导致淡入效果等待淡出效果完成后才被调用。

- Snowburnt

---

知道这个信息很好，但它并不是交叉淡入淡出；它只是将一个元素淡出，然后将另一个元素淡入。 - Brian Snow

我从未想过同时进行淡入淡出时它看起来正确。 - Snowburnt

Answer 2

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

step-2 div在完全隐藏step-1后跳入其位置的原因是因为定位。或者说是缺乏定位。要实现这一点，您必须使用position absolute或position fixed。我在为您创建的示例中使用了absolute。

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

- CRABOLO

---

当div的位置为left: 0; top: 0;时，它会导致奇怪的行为，并且仍然会跳动一些。 - L84

@Lynda 确保你的样式中有 position: absolute;，同时如果有任何边距或内边距，那可能会影响它。 - CRABOLO

我确实使用了 position: absolute;。不确定问题出在哪里。 - L84

不错，但这不是一个交叉淡入淡出。 - Debbie Kurth