jQuery fadeOut逐个多个div，然后同时淡入所有

3 回答

• 1

  实际上，您同时启动 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>
  

  回复于 2024-04-17T03:16:35+08:00
• 1

  正如穆罕默德所建议的那样，你可以使用等待一个完成动作的方法然后为下一个命令发出命令 .

  以下示例将隐藏它们一个一个隐藏所有隐藏它们全部显示：

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

  回复于 2024-04-17T03:16:35+08:00
• 2

  您需要等待fadeOut的结束然后等待fadeIn元素 . 所以使用fadeOut()的fadeOut()函数，当fading 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>
  

  回复于 2024-04-17T03:16:35+08:00