jQuery淡入淡出

Question

我有一個div與幾個圖像。我需要一次只顯示6個。然後我需要淡出當前的六個，並在列表中的後六個中淡出。

我有這個包裹在setInterval函數。這可能嗎？

到目前爲止，我有：

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

"logo"是班上div s表示需要褪色。他們都有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張圖片一段時間，然後淡出它們，淡入淡出下一個六。