javascript - 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>