jQuery点击事件：如何实现点击后依次执行多个动画函数？

我有一个页面，希望通过按钮滑动一个会覆盖下层内容的元素，完成该操作后，在露出的区域执行另一项动画，且所有操作需适配屏幕尺寸。

目前遇到的问题是：点击触发的覆盖层动画与下层元素动画会同时执行；若使用delay方法，第二个动画会独立于点击事件触发。请问如何修改以下代码，实现点击后先执行第一个动画，完成后再执行第二个动画？

else {
$("#lock").click(function(){
    opener();
});
  $(function animation(){
    $(".territory").delay(3000).animate({
              width: "100vw"
          }), "slow";
    $(".territory").animate({
              height: "100vh"
          });
  });
}

核心问题是原代码的动画逻辑脱离了点击事件的控制，且delay()是全局延迟，和点击动作解绑。要实现点击后按顺序执行动画，需把动画逻辑放到点击回调内，利用jQuery动画的完成回调函数串联两个动画。

修改后的代码如下：

else {
  $("#lock").click(function(){
    opener(); // 先执行opener操作
    // 第一个宽度动画，完成后触发回调里的高度动画
    $(".territory").animate({
      width: "100vw"
    }, "slow", function() {
      // 第一个动画完全结束后，执行第二个高度动画
      $(".territory").animate({
        height: "100vh"
      });
    });
  });
}

关键修改说明： #

• 把原本独立的动画逻辑移入#lock的点击回调，确保动画由点击动作触发，而非页面加载后自动执行。
• 移除delay(3000)，改用动画的第三个参数（回调函数）——这个函数只会在第一个动画彻底完成后才执行，完美实现顺序触发。
• 修正了原代码的语法错误：animate({...}), "slow"的括号位置错误，正确写法是animate({目标样式}, 时长, 完成回调)。

这样修改后，点击按钮会先执行opener()，接着完成宽度动画，最后触发高度动画，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Pizzaboi