javascript/jquery 内容旋转器变得疯狂（一段时间后开始快速循环）
我正在使用一个非常简单的内容旋转器。
虽然看起来工作正常，但有时，浏览器窗口在该页面上停留一段时间（可能 10 分钟）后，动画开始高速播放（就像每个“帧”仅播放 1 毫秒）。
这是我的 html：
<ul id="contentRotator">
<li class="cItem">
<a href="#"><img src="" alt="" /></a>
<h3><a href="#">Text</a></h3>
<p><a href="#">Text</a></p>
</li>
<li class="cItem">
...
</li>
...
</ul>
这是我在 chrome 16、ie8、firefox 7、opera 11 和 safari 5 中测试页面的脚本。
function tCycle() {
var duration = 4000;
var speed = 500; //
var arrDivs = $('#contentRotator .cItem');
var arrLength = arrDivs.length;
var iCurrent = 0;
var iNext;
arrDivs.not(arrDivs.eq(iCurrent)).hide();
setInterval(function () {
iNext = (iCurrent + 1) % arrLength;
arrDivs.eq(iNext).fadeIn(speed);
arrDivs.eq(iCurrent).fadeOut(speed);
iCurrent = (iCurrent + 1) % arrLength;
}, duration);
}
它似乎只发生在 chrome 中。
对正在发生的事情有什么想法吗？
编辑：我发现，当它变得疯狂时，如果我滚动到页面底部然后返回（旋转器位于顶部），它（有时）是固定的，速度是正常的。
I am using a very simple content rotator.
Although it seems to be working ok, sometimes, after the browser window remains on that page for a while (10 minutes maybe), the animation starts to play at high speed (like every "frame" just for 1 milisecod).
here is my html:
<ul id="contentRotator">
<li class="cItem">
<a href="#"><img src="" alt="" /></a>
<h3><a href="#">Text</a></h3>
<p><a href="#">Text</a></p>
</li>
<li class="cItem">
...
</li>
...
</ul>
and here is the script
function tCycle() {
var duration = 4000;
var speed = 500; //
var arrDivs = $('#contentRotator .cItem');
var arrLength = arrDivs.length;
var iCurrent = 0;
var iNext;
arrDivs.not(arrDivs.eq(iCurrent)).hide();
setInterval(function () {
iNext = (iCurrent + 1) % arrLength;
arrDivs.eq(iNext).fadeIn(speed);
arrDivs.eq(iCurrent).fadeOut(speed);
iCurrent = (iCurrent + 1) % arrLength;
}, duration);
}
I tested the page in chrome 16, ie8, firefox 7, opera 11 and safari 5. It only seems to happen in chrome.
Any ideas on what is happening?
Edit: I found out that when it's gone crazy, if I scroll until the bottom of the page and then come back up (the rotator is at the top), it is (sometimes) fixed, the speed is normal.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经测试了 http://jsfiddle.net/jphellemons/fRGqA/
它可以在我的机器上运行。
我有 Google Chrome 15.0.874.92 beta-m
您可能需要使用 jQuery 插件，例如 innerfade，因为
fadeIn和fadeOut工作起来不太顺畅。或使用：
编辑：也适用于 Chrome 15.0.874.100！
I have tested http://jsfiddle.net/jphellemons/fRGqA/
and it works on my machine.
I have Google Chrome 15.0.874.92 beta-m
You might want to use a jQuery plugin like innerfade, because the
fadeInandfadeOutdon't work so smooth.or use:
Edit: works in Chrome 15.0.874.100 too!