如何在动画结束后触发动画

how to trigger an animation after another ends

本文关键字：动画 结束      更新时间：2023-11-30

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

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

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

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

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

在官方文档上，您可以看到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");
    });
});

您可以使用queue()函数（假设"trigger-navbar"answers"navigation-bar1"是同一元素的类）：

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

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

.animate（属性[，持续时间][，放松][，完成]）完整

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

从jQuery的文档中，animate（）接受了一个回调函数。此功能将在动画完成后执行。

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

两者都用点击来设置触发器的动画？

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

animate()-函数支持完整的回调：

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

.animate（）

演示

相关文章：