jQuery 一个一个淡出多个div，然后同时淡入所有

Question

$(document).ready(function(){
  $('#divBTN').click(function(){
    $("#div1").fadeOut(1000);
    $("#div2").fadeOut(2000);
    $("#div3").fadeOut(3000);
    $('#div1,#div2,#div3').fadeIn(4000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="div1" style="width:70px; height:30px; background-color: green;"></div>
<br>
<div id="div2"  style="width:70px; height:30px; background-color: green;"></div>
<br>
<div id="div3" style="width:70px; height:30px; background-color: green;"></div>
<br>
<button id="divBTN">Click Me!</button>

如您所见，div 一个接一个地淡出，这是预期的，但是当我试图同时淡入它们时，它一个接一个地淡入一个是不对的。我希望它们都同时淡入。

有人可以帮帮我吗？？

Answer 1

您需要等待 fadeOut 结束，然后 fadeIn 元素。因此，使用 fadeOut() 的 complete 函数，该函数在淡入淡出 end 和 fadeIn 元素时调用。

$('#divBTN').click(function(){
  $("#div1").fadeOut(1000);
  $("#div2").fadeOut(2000);
  $("#div3").fadeOut(3000, function(){
    $('#div1,#div2,#div3').fadeIn(4000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="width:70px; height:30px; background-color: green;"></div><br>
<div id="div2"  style="width:70px; height:30px; background-color: green;"></div><br>
<div id="div3" style="width:70px; height:30px; background-color: green;"></div><br>
<button id="divBTN">Click Me!</button>

Answer 2

实际上，您同时启动 fading-out 所有元素，但动画速度不同。如果您想使用相同的动画速度一个接一个地淡出它们，则必须等到每个 fade-out 完成后再调用另一个 fadeOut()。在下一个示例中，我展示了如何使用递归过程概括（到 X 个连续元素）此动画。

$(document).ready(function()
{
    var fadeOutSpeed = 2000;
    var fadeInSpeed = 3000;

    var seqFadeOutThenFadeAllIn = function(elem)
    {
        // Check if exists a next element.

        if (!elem.length)
        {
            // Fade-in all elements.
            $(".custom-div").fadeIn(fadeInSpeed);
        }
        else
        {
            // Fade-out next element.
            elem.fadeOut(fadeOutSpeed, function()
            {
                seqFadeOutThenFadeAllIn(elem.next(".custom-div"));
            });
        }
    }

    $('#divBTN').click(function()
    {
        // Start fading-out the first element in the set.
        seqFadeOutThenFadeAllIn($(".custom-div").first());
    });
});

.custom-div {
    width: 70px;
    height: 30px;
    margin-bottom: 20px;
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="div1" class="custom-div"></div>
<div id="div2" class="custom-div"></div>
<div id="div3" class="custom-div"></div>

<button id="divBTN">Click Me!</button>

Answer 3

按照 Mohammad 的建议，您可以使用等待一个动作完成然后为下一个动作发出命令的方法。

下面的例子会把它们一个一个地隐藏起来，一旦所有隐藏起来就全部显示出来：

$('#divBTN').click(function(){
    $("#div1").fadeOut(1000, function(){
        $("#div2").fadeOut(1000, function(){
            $("#div3").fadeOut(1000, function(){
                $('#div1,#div2,#div3').fadeIn(1000);
            });
        });
    });
});

jQuery 一个一个淡出多个div，然后同时淡入所有

jQuery fadeOut multiple divs one by one, then fadeIn all at the same time

html

javascript

jquery

fadeout

fadein