Jquery 回调函数是'；t等待第一个功能完成。我如何解决这个问题？

我有一个“幻灯片放映”之类的。我试着让一个div淡出，然后是另一个div淡入

问题是，在新div出现之前，可见div不会完全消失。这会导致两个div同时出现的尴尬闪光

注意：我不能使用绝对定位来堆叠div，因为我希望包装器（父）div随内容展开。当我通过绝对定位将div从“流”中取出时，我似乎无法实现这一点

JSfiddle：

以下是html：

<a href="#" class="red">RED</a> 
<a href="#" class="blue">BLUE</a> 
<a href="#" class="green">GREEN</a> 
<a href="#" class="yellow">YELLOW</a>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="yellow"></div>

…还有JQuery

$('a.red').click(function() {
  $("#blue, #green, #yellow").hide('fade', function() {
      $("#red").show('fade');
  });
});

$('a.blue').click(function() {
  $("#red, #green, #yellow").hide('fade', function() {
      $("#blue").show('fade');
  });
});

$('a.green').click(function() {
  $("#red, #blue, #yellow").hide('fade', function() {
      $("#green").show('fade');
  });
});

$('a.yellow').click(function() {
  $("#red, #blue, #green").hide('fade', function() {
      $("#yellow").show('fade');
  });
});

我一直在摆弄这个！任何帮助都将不胜感激。

使用将停止在DOM上设置动画的

.stop（）

描述：停止匹配元素上当前正在运行的动画

---

一种可能的解决方案是将新div的出现延迟一小段时间，让另一个动画先完成

.delay() 

例如：

$('a.red').click(function () {
   $("#blue, #green, #yellow").hide('fade', function () {

       $("#red").delay(500).show('fade');
   });
});

---

举个简单的例子，大多数情况下，它们都能很好地工作，但有时它们会同时显示一会儿。只需要调整一下：）

问题似乎是“隐藏”动画对已经不可见的元素不花时间。依次为序列中的每个元素触发完整回调，而不仅仅是在动画结束时触发一次。因此，任何不可见元素的动画都将立即完成，并立即触发完整回调。 为了解决这个问题，我调整了元素的jQuery选择器，以便只有实际可见的元素才会被设置动画：

   $('a.red').click(function () {
       toggleVisibility("#blue, #green, #yellow", "#red");
   });

   function toggleVisibility(elementsToHide, elementsToShow) {
       var elements = $(elementsToHide).filter(':visible');
       if (elements.length) {
           // Hide visible elements first if there are any
           elements.fadeOut(function () {
               $(elementsToShow).fadeIn();
           });
       } else {
           // ...otherwise just show specified element directly
           $(elementsToShow).fadeIn();
       }
   }

所以现在回调只触发一次

干杯，亚历克斯

---

编辑：如果所有元素最初都不可见，则不起作用；我相应地修改了代码。另外，新的代码片段更加枯燥。

问题是，对所有匹配的元素运行

.hide（）

，然后即使匹配的元素不可见也运行回调。通过使用

.filter（）

方法，您可以确保只触发一次“.hide（）”方法和回调。这意味着，当您需要捕获尚未显示任何内容的情况时，代码会变得庞大，但它确实工作得很好

这方面的一个例子是

$('a.red').click(function () {
    var elements = $("#blue, #green, #yellow").filter(":visible");
    if (elements[0]) {
        elements.fadeOut(function () {
            $("#red").fadeIn();
        });
    } else {
        $("#red").fadeIn();
    }
});

---

您可以在这里看到它完全起作用了

谢谢！我喜欢这个解决方案，但有一个问题。由于所有div一开始都是隐藏的，因此回调最终根本不会触发。关于变通方法有什么建议吗？你在脚本中可能做的最糟糕的事情就是延迟。你永远无法确定它会起作用。设置相对较小的延迟，这可能不够。如果设置更长的延迟，则在大多数情况下，延迟可能会超过所需的时间。我宁愿自杀也不愿拖延。我明白了，谢谢你教我新东西。将来会记住这一点：）试试这个。人们应该始终尝试编写简洁的代码。

$('a.red').click(function () {
    var elements = $("#blue, #green, #yellow").filter(":visible");
    if (elements[0]) {
        elements.fadeOut(function () {
            $("#red").fadeIn();
        });
    } else {
        $("#red").fadeIn();
    }
});