具有奇怪行为的setInterval（）的简单滑块 [英] Simple slider with setInterval() with strange behavier

问题描述

我正在尝试使用setinterval和jquery创建简单的滑块。

你可以看看这里 http://jsfiddle.net/5m2Dq/

Slider在关注浏览器时效果很好但是当我们去不同的标签超过5分钟时所有的div都来了彼此，并开始切换。

I'm trying to make simple slider by using setinterval and jquery.
you can have a look here http://jsfiddle.net/5m2Dq/
Slider works fine when it is in focus on browser but when we go to different tab for more than 5 min all the div's come's under each other, and start toggling.

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

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

Is there a simple way to achieve the sliding effect like this without any plugin.

推荐答案

这可能是因为您的浏览器开始缺少超时。特别是如果您正在查看另一个选项卡，浏览器认为以恰好2秒的间隔调用回调并不重要。你应该完全抛弃setInterval函数！请使用fadeOut和fadeIn的完成回调来触发效果。

This occurs probably because your browser starts missing timeouts. Especially if you are viewing another tab, the browser thinks that it is not important to call the callback with exactly 2 second intervals. You should ditch the setInterval function altogether! Use instead the completion callback of fadeOut and fadeIn to trigger the effects.

尝试类似

var cycle = function() {
   $('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
   .next('div.loginSlide').fadeIn('slow', function() { setTimeout(cycle, 1500); })
   .end().appendTo('#fbLoginSlide');
};
cycle();

这篇关于具有奇怪行为的setInterval（）的简单滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！