jQuery fadein / out

Question

我有一个带有几张图片的div。我需要一次只显示6个。然后，我需要淡出当前的六个并在列表中的下一个6中淡出。

我将其包含在setInterval函数中。这可能吗？

到目前为止，我已经：

var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
  // …      
}, 2000);

"logo"是需要淡化的div的类。它们都有CSS背景图像（因此没有img标签）。

Answer 1

这是非常直接的方法。纯娱乐。但你应该优化你的HTML。将每6个图像包裹在一个容器中然后切换它们 - 它将更加清洁和自然解决方案。

草图：http://jsfiddle.net/fl00r/HSGF3/4/

<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>

<script>
  $(function(){
    fadeByEachSlice(".hidden",6)
  })

  function fadeByEachSlice(object, step){
    var i = 0;
    objects = $(object)
    function nextSlice(){
      if(i%step == 0){
        if( i <= objects.length ){
          slice = objects.slice(i, step+i);
          fadeSlice(slice)
        }
      }
    }
    function fadeSlice(slice){
      $(slice).fadeIn().delay(1000).fadeOut("fast", function(){
        i+=1; nextSlice();
      })
    }  
    nextSlice()
  }

</script>

Answer 2

你可以使用jQuery延迟功能暂时显示6个图像，然后逐渐淡出它们并在接下来的6个时间内淡出。