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

jQuery onClick slideUp＆amp; addClass不工作

1 个答案: