CODEWITHSUNDEEP
javascriptjqueryanimationfade
benhowdle89
benhowdle89

Reputation: 37454

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 have 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).

Upvotes: 1

Views: 149

Answers (2)

fl00r
fl00r

Reputation: 83680

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>

Upvotes: 1

sushil bharwani
sushil bharwani

Reputation: 30177

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

Upvotes: 0

Related Questions