配列から設定した後にイメージをフェード/スライドインする方法は？

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>