为何jQuery fadeOut()仅触发首个元素？如何绑定多元素到Promise？

问题根源 #

你在第二个条件里用的$(element1, element2)写法有误——jQuery中这种语法是把第二个参数作为上下文（元素查找范围），而非同时选中两个独立元素。实际只会执行element1的fadeOut，element2被当作查找element1的范围，自然不会触发动画。

修复方案 #

1. 正确选中多个元素并绑定Promise #

要同时对两个元素执行fadeOut，可以用以下两种写法：

• 用add()方法合并元素集合：

  $(element1).add(element2)
    .fadeOut("slow")
    .promise()
    .done(function() {
      $(element3).fadeIn("slow");
      resolve();
    });
  

• 直接传入DOM元素数组：

  $([element1, element2])
    .fadeOut("slow")
    .promise()
    .done(function() {
      $(element3).fadeIn("slow");
      resolve();
    });
  

两种写法都会正确选中两个元素，.promise()会等待所有元素的动画完成后，再触发done回调并resolve外层Promise。

2. 单独调用fadeOut时绑定Promise #

如果坚持分开调用fadeOut，可以用$.when()合并两个动画的Promise，确保两者都完成后再执行后续逻辑：

$.when(
  $(element1).fadeOut("slow").promise(),
  $(element2).fadeOut("slow").promise()
).done(function() {
  $(element3).fadeIn("slow");
  resolve();
});

$.when()会等待所有传入的Promise完成后，才触发done回调，保证两个元素都淡出后再resolve外层Promise。

额外修正点 #

原代码第三个条件中，resolve()直接写在fadeOut调用后，会导致.then()里的DOM操作在动画未完成时就执行，应该把resolve()移到fadeOut的回调内：

} else {
  $(element1).fadeOut("slow", function() {
    $(element3).fadeIn("slow");
    resolve(); // 移至此处，确保动画完成后再resolve
  });
}

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