javascript/jquery内容旋转器变得疯狂(一段时间后开始快速循环) [英] javascript/jquery content rotator goes crazy (starts to loop very fast after sometime)

问题描述

我正在使用一个非常简单的内容循环器.

I am using a very simple content rotator.

尽管似乎可以正常运行，但有时，浏览器窗口在该页面上停留一段时间(可能10分钟)后，动画开始高速播放(就像每个帧"只播放1 milisecod一样).

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).

这是我的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>

这是脚本

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 16(即8，firefox 7，opera 11和safari 5)中测试了该页面.这似乎仅在chrome中发生.

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?

我发现，当它变得疯狂时，如果滚动到页面底部然后又向上滚动(旋转器在顶部)，它是(有时)固定的，速度是正常的.

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.

推荐答案

我已经测试过 http://jsfiddle .net/jphellemons/fRGqA/ 它可以在我的机器上运行. 我有Google Chrome 15.0.874.92 beta-m

I have tested http://jsfiddle.net/jphellemons/fRGqA/ and it works on my machine. I have Google Chrome 15.0.874.92 beta-m

您可能希望使用jQuery插件，例如 innerfade ，因为fadeIn和fadeOut不能这么顺畅地工作.

You might want to use a jQuery plugin like innerfade, because the fadeIn and fadeOut don't work so smooth.

或使用:

arrDivs.eq(iCurrent).fadeOut(speed, function() {
    arrDivs.eq(iNext).fadeIn(speed);
});

也可以在Chrome 15.0.874.100中使用！

works in Chrome 15.0.874.100 too!

这篇关于javascript/jquery内容旋转器变得疯狂(一段时间后开始快速循环)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！