Question

我试图通过以下方式在.fadeIn("slow");循环中附加jQuery append();和forEach();：

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

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

Answer 1

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

要使元素一个接一个地显示，可以使用随每次迭代而增加的延迟

＆＃13;

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);

});

＆＃13;

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

＆＃13;

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

中消失

Answer 2

您未在附加元素上调用.fadeIn(...)，而是在showData元素上调用它。

您可以这样做：

items.forEach(function (item) {
    var e = $("<div>Test</div>");
    e.hide();
    showData.append(e);
    e.fadeIn('slow');
});

Answer 3

试试这个

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

var i=0;
while(i<10){
var div = $('<div>Test</div>').hide();
$('body').append(div);
div.fadeIn('3000');
i++;

}

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

forEach循环中的jQuery动画

3 个答案: