2017-02-27 6 views
0

スライドまたはフェードのいずれかで画像の読み込みをページに反映させようとしています。配列からロードされているため、これに関するドキュメントが見つかりませんでした。配列から設定した後にイメージをフェード/スライドインする方法は?

JS:ここ

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

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


} 
+0

[ '$(グーグル).fadeIn()'](HTTP://api.jquery .com/fadein /) –

答えて

0

が私の提案です:

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>

+0

ありがとう、魅力的な@Mikeのように働いた – Damian

+0

@Damianようこそ。アニメーションの速度(ミリ秒単位)を制御するために、カッコ内の数値を調整することができます。 – Mike

関連する問題