jQueryアニメーションを使用して、あるdivの隠れをシーケンスし、別のdivを表示する方法は？

Question

私は自分のフォームから次のdivを示すべきコードを持っている：

次へ]ボタン：

$('.site.active').removeClass('active').hide().next().show().addClass('active'); 

戻るボタン：

$('.side.active').removeClass('active').hide().prev().show().addClass('active'); 

すべてが私のために正常に動作しますが、私はどのようにアニメーション化することができます私のショーはこのフォームのようにここにあります：http://azmind.com/demo/bootstrap-long-multi-step-form/

私のフォームでは、移行は非常に難しく、最後には次に表示されます。

Answer 1

コールバックを使用してアニメーションをネストできます。アニメーションが終了すると、コールバック関数が呼び出されます。その中で、別の要素で別のアニメーションを実行することができます。あなたのケースでは

、あなたはその者のフェードアウトコールバックで.activeを削除し、.next()を呼び出し、「次」の要素であることフェードイン、その後で.addClass()を呼び出し、それをフェードアウト、.activeクラスを持つ要素を選択することをお勧めしますフェードインのコールバック。

$(function() { 
 
    $('.next').on('click', function() { 
 
    $('.active').fadeOut('slow', function() { 
 
     // this gets called when the fade out finishes 
 
     $(this).removeClass('active').next().fadeIn('slow', function() { 
 
     // this gets called when the fade in finishes 
 
     $(this).addClass('active'); 
 
     }); 
 
    }); 
 
    }); 
 
});

.page { 
 
    display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.first { 
 
    display: block; 
 
    background: red; 
 
} 
 

 
.second { 
 
    background: blue; 
 
} 
 

 
.third { 
 
    background: green; 
 
} 
 

 
.active { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page first active">first page</div> 
 
<div class="page second">second page</div> 
 
<div class="page third">third page</div> 
 
<button class="next">Next</button>