使用 fadeIn() 不按顺序出现的段落

Question

我希望名字按顺序淡入。它目前在动画方面看起来很糟糕。我希望第一个名字出现然后倒下，第二个取而代之，然后第二个倒下等等

var friends = ["John", "Max", "Jeena", "Suki"];
for (var i = 0; i < friends.length; i++) {
  $("body").append("<p>" + friends[i] + "</p>");
  $("p").hide().fadeIn(1000 * (i + 2));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

问题是因为您在每次迭代中对所有现有元素再次调用 hide() 和 fadeIn。

要使这项工作如您所愿，您只需将这些方法调用应用到您在循环逻辑中创建的 current p 元素。

在下面的示例中，请注意默认情况下使用 CSS 来隐藏 p 而不是 jQuery 的 hide() 方法。这是为了避免任何可能的 FOUC。

["John", "Max", "Jeena", "Suki"].forEach((name, i) => {
  $(`<p>${name}</p>`).appendTo('body').fadeIn(1000 * (i + 2));
});

p { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更新

Can I make it so until the 1st name's animation is finished other's dont start to appear?

当然，您可以使用 delay() 让每个动画等待预定的时间让之前的动画完成：

["John", "Max", "Jeena", "Suki"].forEach((name, i) => {
  $(`<p>${name}</p>`).appendTo('body').delay(1000 * i).fadeIn(500);
});

p { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用 fadeIn() 不按顺序出现的段落

Paragraphs not appearing in order using fadeIn()

javascript

jquery

animation

append

paragraph