Question

我绝对不是jQuery的新手。我写了一些代码。关于我的守则（如下）。我认为第一个alert()消息将在应用第一个fadeOut()动画之后显示，然后第二个alert()消息将在应用第二个fadeIn()动画之后显示，依此类推。

但是结果却完全不同。首先弹出所有alert()条消息，然后应用动画？

如何执行此代码？

$(document).ready(function() {

  //Fade Out.
  jQuery(".red-box").fadeOut(2000);
  jQuery(".green-box").fadeOut(2000);
  jQuery(".blue-box").fadeOut(2000);

  alert("Fade Out.");

  //Fade In.
  jQuery(".red-box").fadeIn();
  jQuery(".green-box").fadeIn();
  jQuery(".blue-box").fadeIn();

  alert("Fade In.");

  //Fade To.
  jQuery(".red-box").fadeTo("2000", "0.2");
  jQuery(".green-box").fadeTo("2000", "0.5");
  jQuery(".blue-box").fadeTo("2000", "0.1");

  alert("Fade To.");

  //Fade Out.
  jQuery(".red-box").fadeOut(2000);
  jQuery(".green-box").fadeOut(2000);
  jQuery(".blue-box").fadeOut(2000);

  alert("Fade Out Again.");

  //Fade Toggle.
  jQuery(".red-box").fadeTo("2000", "0.2");
  jQuery(".green-box").fadeTo("2000", "0.5");
  jQuery(".blue-box").fadeTo("2000", "0.1");

  alert("Fade Toggle.");

});

red-box { background-color:red }
green-box { background-color:green }
blue-box { background-color:blue }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red-box">Red</div>
<div class="green-box">Green</div>
<div class="blue-box">Blue</div>

显示淡出动画后如何执行alert（）？

0 个答案: