2017-02-27 79 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