从数组设置后如何使图像淡入/滑入？

【问题标题】：How to make an image fade/slide in after being set from an array?从数组设置后如何使图像淡入/滑入？
【发布时间】：2017-02-27 00:27:48
【问题描述】：

我正在尝试通过滑动或淡入来将我的图像加载到我的页面中。它是从一个数组中加载的，找不到任何关于此的文档。

JS：

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

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


}

【问题讨论】：

$(google).fadeIn()

标签： javascript jquery css jquery-animate

【解决方案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>

【讨论】：

@Damian 欢迎您。您可以调整括号中的数字来控制动画速度（以毫秒为单位）。