jQuery的：通過跨段容器褪色

Question

有這個HTML

<span style="display:none">slogan 1</span> 
<span style="display:none">slogan 2</span> 
<span style="display:none">slogan 3</span> 

有這個JS：

var timer = 0; 
$('.banner').children('span').each(function(index) { 
    timer = timer + 2000; 
    $(this).delay(2500*index).fadeIn(timer, 'linear').fadeOut('3000', 'linear'); 
}); 

JS基本上循環通過每個跨度淡入和淡出他們。 但它只有一次（從口號1到口號3）。 我想以某種方式循環多次，如我所願。對於（）{} 是否不正確。

你能幫我嗎？ 謝謝。

Answer 1

(function fade(num, idx, cycles) { 
    var 
    spans = $('span'), 
    idx = idx || 0, idx = idx < spans.length ? idx : 0, 
    cycles = typeof cycles === 'undefined' ? num * spans.length : cycles; 

    if (cycles > 0) { 
    spans.eq(idx).fadeIn().fadeOut(function() { 
     fade(num, idx + 1, cycles - 1); 
    }); 
    } 
}(2 /* two runs total*/)); 

Answer 2

這應該爲你工作 - http://jsfiddle.net/ML5b5/1/

<span>slogan 1</span> 
<span style="display:none">slogan 2</span> 
<span style="display:none">slogan 3</span> 

var spanCounter = 0; 

setInterval(function(){ 
    var $span = $('span').eq(spanCounter); 
    spanCounter = cycleSpan($span, spanCounter); 
    spanCounter = (spanCounter >= $('span').length) ? 0 : spanCounter; 
}, 3000) 

function cycleSpan($span, spanCounter) { 
    $span.fadeOut('slow', function(){ 
     if ($span.next('span').length) { 
      $span.next().fadeIn('slow'); 
     } else { 
      $span.siblings('span:first').fadeIn(); 
     } 
    }); 
    return ++spanCounter; 
}; 

這將在全局範圍內的計數器變量，我真的不喜歡，但你可以嘗試重構它把它拿出來。這段代碼實質上是通過跨度循環並將其發送到一個循環函數，該循環函數將隱藏當前範圍並顯示下一個範圍。你可能想用一個類來更新這些跨度，這樣他們就不會弄亂你的其他文檔。