Crossfade两个div使用jQuery

Question

我在网站上有一个多步骤的网络表单.当一个人点击下一个时,div会逐渐消失,因为div二渐渐淡入.我看到的问题是当div一个淡出div二衰落在div一个下面然后跳跃一旦div一个淡出.

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

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" );
      });
    });

这将导致淡入等待被调用直到淡出完成.