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

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

下面是第一个发生的情况，这是向下滑动到第二个导航栏：

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

第二个动画，这将触发打开导航栏的css：

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

您可以使用

queue（）

函数（假设“trigger navbar”和“navigation-bar1”是同一元素的类）：

---

您可以在完整的回调函数中触发新动画

.animate（属性[，持续时间][，缓和][，完成]） 完整的

类型：函数（） 动画完成后要调用的函数

从中，animate（）接受回调函数。此功能将在动画完成后执行

  $('html,body').animate({
    scrollTop: $(".navigation-bar2").offset().top
  }, 'slow', function() {
    // Animation complete, do something else
  });

animate（）

-函数支持完整回调：

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

在上，您可以看到

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

---

两个都用“单击”设置触发器的动画

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

 $(".trigger-navbar").click()
});

---

我很困惑，因为“第二个动画”只是在一个完全独立的事件下向元素添加一个类…？第二个“toggleClass”东西：P现在不再工作了…？这里也不切换它class@WesselVisser由于

html，body

-选择器，整个回调将触发两次，所以这个类又被移除了。尝试将选择器更改为仅

html

，请参见我的示例。它应该在选择器上正确切换类。我创建了一个小示例，看看这里：

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

 $(".trigger-navbar").click()
});