javascript - forEach 循环中的 jQuery 动画

Question

我正在尝试在 forEach(); 中使用 append(); 附加 jQuery .fadeIn("slow");按以下方式循环:

items.forEach(function (item) {
     showData.append('<div>Test</div>').fadeIn('slow');
});

但是，一旦触发循环，添加的 div 数量仍然不会添加淡入淡出效果。关于如何通过 jQuery 或 CSS 获得淡入淡出效果的任何想法都是最好的解决方案。

Answer 1

您正在为 showData 元素设置动画，无论它是什么，它可能已经可见。
您想要的可能是对插入的 DIV 进行动画处理

要使元素一个接一个地出现，您可以使用随着每次迭代而增加的延迟

var items  = [1, 2, 3, 4, 5, 6],
  showData = $('#test');

items.forEach(function(item, index) {
  $('<div />', {
    text : 'Test',
    css  : {display: 'none'}
  }).delay(index * 600).fadeIn('slow').appendTo(showData);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

当然，元素必须先隐藏才能淡入