提问者:小点点

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


我想让名字按顺序淡出。 它目前看起来很糟糕的动画智慧。 我要第一个名字出现然后倒下,第二个取而代之,然后第二个倒下等等

null

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>

null


共1个答案

匿名用户

问题在于您在每次迭代中都要对所有现有元素再次调用hide()fadein

要使其按您所期望的那样工作,您只需要将这些方法调用应用到您在循环逻辑中创建的当前p元素。

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

null

["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>