jQuery的動畫在foreach循環

我想在forEach();環路以append();附加jQuery的.fadeIn("slow");方式如下：jQuery的動畫在foreach循環

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

然而，只要循環是觸發器的被添加的格量是仍然沒有添加褪色效果。我可以通過jQuery或CSS獲得淡入淡出效果的任何想法都是最好的解決方案。

來源

2017-08-16 Joseph Carolina

真正需要，以示對對方回答.. –

您正在爲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>

增加了延遲當然，元素必須先隱藏，然後才能淡入。

來源

2017-08-16 09:23:35 adeneo

三江源更多的代碼，我該如何在每個div上添加fadeIn，而不是全部tho？ –

它將它添加到每個DIV中，我想你所問的是如何延遲動畫，以便元素依次出現 – adeneo

正是如此，我正在尋找:) –

您不是在附加電話號碼.fadeIn(...)元素，你可以在showData元素上調用它。

你可以做這樣的事情：

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

來源

2017-08-16 09:23:46 Titus

嘗試這樣

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>

來源

2017-08-16 09:24:58 prasanth

jQuery的動畫在foreach循環

回答

相關問題