jQuery onClick slideUp＆addClass不起作用

Question

我正在嘗試在部分之間進行轉換。
1.向上滑動電流部分並應用「已完成」類。
2.然後滑動下一節了從底層應用類「活動」

我也想知道如何滑動部分，然後
刪除類，因爲它的所有在同一時間
其發生原因它在它滑落之前消失。

HTML：

<section class="active"> 
    <h1>Hi, how are you?</h1> 
    <p>This is paragraph text!</p> 
    <button class="btn">Next</button> 
</section> 

<section> 
    <h1>Section number two.</h1> 
    <p>This is paragraph text!</p> 
    <button class="btn">Next</button> 
</section> 

<section> 
    <h1>Section number three.</h1> 
    <p>This is paragraph text!</p> 
    <button class="btn">Next</button> 
</section> 

CSS：

section { 
    display: none; 
    width: 400px; 
    background: rgba(000,000,000,.3); 
    border-radius: 5px; 
    text-align: center; 
    padding: 5px 0; 
    font-family: helvetica, sans-serif; 
} 

.active { 
    display: block; 
} 

的jQuery：

$('button').click(function() { 
    $('.active').slideUp('fast').removeClass('active').addClass('completed'); 
    $(this).next("section").slideUp().addClass('active'); 
}); 

Answer 1

大多數（？全部）的jQuery動畫功能，有被稱爲回調參數一旦動畫完成：

$('.active').slideUp('fast', function() { 
    $(this).removeClass('active').addClass('completed'); 
});