具有奇怪行为的setInterval（）的简单滑块

我正在尝试使用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();