JQuery onClick slideUp и addClass не работает

Я пытаюсь перейти между разделами.
1. Сдвиньте текущий раздел вверх и примените класс "completed".
2. Затем сдвиньте следующий раздел снизу вверх, примените класс "active"

Мне также интересно, как сдвинуть раздел, а затем
удалить класс, потому что все это происходит одновременно
, из-за чего он исчезает до того, как он скользит вверх.

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