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会一个接一个地淡出，这是所期望的，但是当我尝试同时淡入一个div时，它会一个接一个地淡入，这是不正确的。我希望它们都同时消失。

有人可以帮我吗？

Answer 1

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

$('#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，然后一次完全淡入

3 个答案: