jQuery fadein/out

I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.

I ha开发者_运维技巧ve this wrapped in a setInterval function. Is this possible?

So far, I’ve got:

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

"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).

This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.

sketch: 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>

you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.