JQuery Fadein / Out - PullRequest
Новая
       33

JQuery Fadein / Out

1 голос
/ 28 марта 2011

У меня есть div с несколькими изображениями.Мне нужно отображать только 6 одновременно.Затем мне нужно исчезнуть из текущей шестерки и перейти в следующие 6 в списке.

У меня это обернуто в setInterval функцию.Возможно ли это?

Пока у меня есть: 

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

"logo" - это класс div s, которые должны исчезнуть.Все они имеют фоновые изображения CSS (следовательно, нет тегов img).

Ответы [ 2 ]

1 голос
/ 28 марта 2011

Это очень прямой подход.Просто для удовольствия.Но вы должны оптимизировать свой 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>
0 голосов
/ 28 марта 2011

Вы можете использовать функцию задержки jQuery для отображения 6 изображений на некоторое время, а затем затемнения и затемнения следующих шести.

...