如何在從數組中設置圖像後淡入/滑入？

Question

我試圖通過滑動或淡入淡出將我的圖像加載到我的頁面中。它正在從一個數組中加載，無法找到任何文檔。

JS：

for(i =0; i < 10; i++){ 

    //instantiates all the initial images. 
    $('.penguin'+ i).css("background-image", 'url("imagess/bin.jpg")'); 


} 

Answer 1

這裏是我的建議：

for(i = 0; i < 10; i++){ 
 

 
    $('.penguin'+ i).css({backgroundImage: 'url(http://placehold.it/350x150)', display: 'none'}); 
 
    $('.penguin'+ i).fadeIn(3000); 
 

 
}

div { 
 
    width: 350px; 
 
    height: 150px; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="penguin0"></div> 
 
<div class="penguin1"></div> 
 
<div class="penguin2"></div> 
 
<div class="penguin3"></div> 
 
<div class="penguin4"></div> 
 
<div class="penguin5"></div> 
 
<div class="penguin6"></div> 
 
<div class="penguin7"></div> 
 
<div class="penguin8"></div> 
 
<div class="penguin9"></div>