段落未使用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>