帶有奇怪行爲的setInterval（）的簡單滑塊

Question

我想通過使用setinterval和jquery來製作簡單的滑塊。
你可以在這裏看看http://jsfiddle.net/5m2Dq/
當滑塊專注於瀏覽器時滑塊工作正常，但當我們在不同的標籤下超過5分鐘時，所有的div都進入彼此之下，並開始切換。

$('#fbLoginSlide div:gt(0)').hide(); 
setInterval(function(){ 
    $('#fbLoginSlide :eq(0)').fadeOut('slow').hide() 
    .next('div.loginSlide').fadeIn('slow') 
    .end().appendTo('#fbLoginSlide'); 
},2000); 

有沒有一種簡單的方法來實現像這樣的滑動效果沒有任何插件。

Answer 1

這可能是因爲您的瀏覽器開始缺少超時。特別是如果您正在查看另一個選項卡，瀏覽器認爲以2秒的間隔調用回調並不重要。你應該完全拋棄setInterval函數！使用fadeOut和fadeIn的完成回調來觸發效果。

嘗試像

var cycle = function() { 
    $('#fbLoginSlide :eq(0)').fadeOut('slow').hide() 
    .next('div.loginSlide').fadeIn('slow', function() { setTimeout(cycle, 1500); }) 
    .end().appendTo('#fbLoginSlide'); 
}; 
cycle();