CODEWITHSUNDEEP
jqueryhtmlcssaddclassremoveclass
user3353309
user3353309

Reputation: 11

jQuery onClick slideUp & addClass not working

I am trying to transition between sections.
1. Slide current section up and apply class "completed".
2. Then slide next section up from bottom apply the class "active"

I am also wondering how to slide the section and then
remove the class because its all happening at the same time
which cause it to disappear before it slides up.

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

Upvotes: 1

Views: 1566

Answers (1)

Jason P
Jason P

Reputation: 27022

Most (all?) jQuery animation functions have a callback parameter that is called once the animation is complete:

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

Upvotes: 1

Related Questions