jquery - 回调函数不会等到第一个函数完成。我该如何解决/解决这个问题？

Question

我有一个“幻灯片”......之类的。我正在尝试让一个 div 淡出，然后另一个 div 淡入。

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

注意:我无法使用绝对定位来堆叠 div，因为我希望包装器(父)div 随内容一起扩展。当我通过绝对定位将 div 从“流”中取出时，我似乎无法实现此目的。

JSfiddle:HERE.

这是 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>

...CSS...

#red, #blue, #green, #yellow{display:none; width:200px; height:200px;}
#red{background:red;}
#blue{background:blue;}
#green{background:green;}
#yellow{background:yellow;}

...和 ​​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');
  });
});

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

Answer 1

问题是 .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();
    }
});

您可以在 JSFiddle 中看到这完全有效。