jQuery 同时淡出多个 div 元素

Question

我将尝试同时淡出多个div，并在完成后淡入一个div。以下是代码：

我正在努力实现这一点：

if($(this).attr("id")==="benefits-button"){

    $("#solar-about, #home-page, #process-page, #financing-page, #vendors-page, #consump-info-page, #smart-page, #wind-page, #about-page").fadeOut(750, function() {
         $("#benefits-page").fadeIn(750);
    });
    }

当选择器中有多个div时，fadeOut和fadeIn同时发生。

问题：我该如何让fadeIn在fadeOut之后发生？

谢谢

- Vinny

---

那么，问题是什么？ - Marc

为什么不使用“class”而过多地使用“id”？ - Ram

@Raminson，您的评论实际上就是答案™。 - Roko C. Buljan

@Marc：“A不起作用。A可以。” 隐含的问题可能是，“如果A可以，为什么A不能工作，我该如何让它以同样的方式工作？” - Armatus

基本上，我正在尝试同时淡出多个div，然后在完成后淡入一个div。 上面的代码将在淡出时淡入。 - Vinny

你尝试过在使用.fadeOut(之前使用.stop()吗？ - Roko C. Buljan

Answer 1

$("#benefits-page").fadeIn(750);

它立即起作用是因为它在第一个元素(#solar-about 在你的例子中)的fadeOut动画完成时开始工作。

如果您想要等待所有动画完成，那么可以使用.promise()，像这样：

$("#solar-about, #home-page, #process-page, #financing-page, #vendors-page, #consump-info-page, #smart-page, #wind-page, #about-page").fadeOut(750).promise().done(function() {
     $("#benefits-page").fadeIn(750);
});

演示

- Okan Kocyigit