javascript - 具有奇怪行为的带有 setInterval() 的简单 slider

Question

我正在尝试使用 setinterval 和 jquery 制作简单的 slider 。
你可以在这里看看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);

有没有一种简单的方法可以实现这样的滑动效果，不需要任何插件。

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();