为什么 jQuery 一次对不同的元素应用效果？答案

【问题标题】：Why is jQuery applying effects on different elements at once?为什么 jQuery 一次对不同的元素应用效果？
【发布时间】：2021-04-29 15:09:15
【问题描述】：

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

$(() => {
  $("#first").fadeIn(2000).delay(3000).fadeOut(2000);
  $("#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>

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

【问题讨论】：

问题是.fadeIn() 不是动画效果，因此不会进入动画队列，而.delay() 会延迟动画队列。动画不透明度或使用fadeIn回调.fadeIn(2000, function() { setTimeout($(this).fadeOut(2000), 3000); })（很确定有不止一个现有问题可以详细解释这一点）
@freedomn-m 谢谢，我会试试的。

标签： javascript html jquery animation

【解决方案1】：

两个同时调用，调用第二个，第一个动画完成后，可以使用.done()：

$(() => {
  $.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>

【讨论】：

谢谢，这行得通。如果我有两个以上的元素，我必须像这样嵌套所有元素还是有其他方法？
不行，那你需要嵌套嵌套（可能是循环）：$.when( .done(function(){$.when(.done( function(){})) }));