javascript - 具有setInterval()且行为异常的简单滑块

我试图通过使用setinterval和jquery来制作简单的滑块。
  你可以在这里看看http://jsfiddle.net/5m2Dq/
Slider专注于浏览器时工作正常，但是当我们进入不同的选项卡超过5分钟时，所有div都位于彼此下方，并开始切换。

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

有没有一种简单的方法就可以在没有任何插件的情况下达到这样的滑动效果。

最佳答案

发生这种情况的原因可能是您的浏览器开始缺少超时。尤其是在查看另一个选项卡时，浏览器认为以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();