javascript - 如何在另一个结束后触发动画

Question

我想在另一个动画结束后触发 jQuery 动画。

这是首先发生的事情，这是向下滑动到第二个导航栏:

$(".navigation-bar1").click(function() {
    $('html,body').animate({
        scrollTop: $(".navigation-bar2").offset().top
    }, 'slow');
});

第二个动画，这会触发一个打开导航栏的 css:

$(".trigger-navbar").click(function() {
    $("body").toggleClass("navbar-down");
});

Answer 1

关于 official documentation你可以看到 animate() 的签名是

.animate( properties [, duration ] [, easing ] [, complete ] )

[, complete] 是您感兴趣的部分:您可以编写一个将在动画结束时调用的函数。

因此，您可以尝试:

$(".navigation-bar1").click(function() {
    $('html,body').animate({
        scrollTop: $(".navigation-bar2").offset().top
    }, 
    'slow', 
    function(){
        // This will be executed after the animation ends
        $("body").toggleClass("navbar-down");
    });
});