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

发布于 2024-12-13 00:25:13 字数 473 浏览 2 评论 0原文

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

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与风相奔跑 2024-12-20 00:25:13

发生这种情况可能是因为您的浏览器开始缺少超时。特别是如果您正在查看另一个选项卡，浏览器会认为以 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();

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.

Try something like

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

回复收藏 0 原文

~没有更多了~