jQuery show/hide动画异常：按钮菜单显示无blind动效问题

你的问题核心是AJAX异步请求的时序问题：你在循环里发起多个AJAX请求后立刻调用show("blind")，但此时所有AJAX请求都还没完成，容器是空的——jQuery UI的blind动画需要元素有可见内容才能展示折叠/展开效果，空元素的show动画会直接跳过效果，导致新菜单直接弹出。

修复方案：等待所有AJAX请求完成后再执行show动画 #

不要直接在循环后调用show，而是用Promise.all等待所有AJAX请求结束，再执行动画：

$(container).hide("blind", { direction: "down" }, 500, function() {
  $(container).html("");
  // 把每个AJAX请求包装成Promise
  const ajaxPromises = Object.keys(buttons).map((key, i) => {
    return new Promise((resolve) => {
      $.ajaxSetup({ cache: false });
      $.ajax({
        // 填入你的AJAX配置：url、data等
      })
      .always(function(msg) {
        $(container).append("<div class='button'>" + label + "</div>");
        resolve();
      });
      $.ajaxSetup({ cache: true });
    });
  });

  // 等待所有AJAX请求完成后，执行show动画
  Promise.all(ajaxPromises).then(() => {
    $(container).show("blind", { direction: "down" }, 500);
  });
});

补充说明 #

• 你之前不清空容器时动画正常，是因为容器里有旧按钮内容，show动画针对非空元素执行，虽然之后新按钮会追加，但动画效果能正常触发。
• 不建议用setTimeout延迟show操作：AJAX请求的耗时不确定（网络波动、后端响应速度等），固定延迟要么还是赶在AJAX完成前执行，要么让用户等待不必要的时间，体验很差。

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