菜单无法使用 jQuery 显示/隐藏正确设置动画

Question

我有一个水平按钮菜单，我正在用jQuery和jQuery UI制作动画，以用"盲目的"；效果，然后用"；盲目的"；以掩盖通过AJAX删除一个菜单和加载另一个菜单的行为。问题在于，当菜单正确地隐藏自身时；显示"；部分没有动画，它看起来就像新菜单刚刚弹出。

$(container).hide("blind", { direction: "down" }, 500, function() {
$(container).html("");
Object.keys(buttons).forEach((key, i) => {
$.ajaxSetup({ cache: false });
$.ajax({
// get HTML for each button
})
.always(function(msg) {
$(container).append("<div class='button'>" + label + "</div>");
});
$.ajaxSetup({ cache: true });
});
$(container).show("blind", { direction: "down" }, 500);
});

编辑：我尝试过的一件事是在显示/隐藏过程中不删除容器的HTML，这解决了显示/隐藏动画的问题(尽管它不可用，因为它变成了一个不断添加更多按钮的菜单(。这似乎表明；显示"；动画是在一个空容器上调用的；隐藏"；完成和"；显示"；开始用内容填充菜单。强制同步行为似乎是最简单的解决方案，但也有一些缺点，所以我将尝试在"；显示"；操作。

Answer 1

因此，经过进一步的实验，我设法自己解决了这个问题。这有点复杂，但它有效。

$(container).hide("blind", { direction: "down" }, 500, function() {
$(container).html("");
Object.keys(buttons).forEach((key, i, key_array) => {
$.ajaxSetup({ cache: false });
$.ajax({
// get HTML for each button
})
.always(function(msg) {
$(container).append("<div class='button'>" + label + "</div>");
if(i === (key_array.length - 1)) {                           
setTimeout(function () {
$(container).show("blind", {direction: "down"}, 500);
},
250);
}
});
$.ajaxSetup({ cache: true });
});
});

基本上，我现在所做的是在启动"；显示"；即使这样，我也会将其设置为250毫秒的超时，以便浏览器有时间先加载所有内容(如果还没有的话(。还有一些条件可以添加，比如检查某个元素(按钮或其容器(是否有长度，甚至可能添加while循环或类似的条件来不断检查最后一个元素的存在，但这是简化的版本。