带有 setInterval() 的简单滑块具有奇怪的行为答案

【问题标题】：Simple slider with setInterval() with strange behavier带有 setInterval() 的简单滑块具有奇怪的行为
【发布时间】：2011-10-31 06:27:14
【问题描述】：

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

有没有简单的方法可以不用任何插件也能实现这样的滑动效果。

【问题讨论】：

标签： javascript jquery setinterval jquery-slider

【解决方案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();

【讨论】：

如何在淡出和淡入中设置间隔，我们将不胜感激。
你不想要，如果你需要超时，使用 setTimeout 代替。
我的例子效果更好，因为只有在之前的淡入完成后才会触发淡出。
很好，但我又回到了原点，因为当我再次使用 setTimeout setTimeout("cycle()",5000); 时，行为相同。作为 setInterval()。
试试我的示例代码。另外：永远不要使用带有字符串值的 setTimeout ("cycle()")。