javascript - 带有 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();