为什么jQuery会同时对不同的元素应用效果？

Question

我有两个元素，我想让它们淡出，停留3秒，然后使用jQuery一个接一个淡出，但效果是一次应用的。

null

$(() => {
  $("#first").fadeIn(2000).delay(3000).fadeOut(2000);
  $("#second").fadeIn(2000).delay(3000).fadeOut(2000);
});

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="first" style="display: none;">First<h1>
<h1 id="second" style="display: none;">Second<h1>

null

我尝试使用dequeue()和stop()方法，但都不起作用。是什么导致了这个问题？有没有更好的方法来实现这个目标？

Answer 1

您同时调用这两个，在第一个动画完成后调用第二个，要实现这一点，您可以使用.done():

null

$(() => {
  $.when($("#first").fadeIn(2000).delay(3000).fadeOut(2000))
  .done(function(){
  $("#second").fadeIn(2000).delay(3000).fadeOut(2000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="first" style="display: none;">First<h1>
<h1 id="second" style="display: none;">Second<h1>