jquery - jquery setintervalはキューを最小化します

Question

フェードイン、フェードアウト、および追加を使用して、jQuery を使用してバナーをアニメーション化しています。私が抱えている問題は、目的の結果が生成されている間、タブを最小化または変更するたびに、アニメーションがキューになり、Web ページを再度開くと狂ってしまうことです!

どうすればこれを防ぐことができますか? アニメーションが既に実行されているかどうかを確認する if ステートメントを追加できますか? 1 つのアニメーションにボトルネックできますか?

検討：

$(function () {
    var fElement = $('.fadein');
    fElement.find('img:gt(0)').hide();
    setInterval(function () {
        if (!fElement.data('paused')) {
            fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        } else {
             console.log('waiting...');
        }
    }, 5000);

    $('map').hover(
        function() {
            console.log('pausing');
            fElement.data('paused', 1);
        },
        function() {
            console.log('unpausing');
            fElement.data('paused', 0);
        }
    );
});

        if ( !console && !console.log ){
            console = {};
        console.log = function(){};
    }

そしてHTML：

<div class="fadein">
    <img src="#" usemap="#" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
    <img src="#" usemap="#" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
</div>

また、フィドル: http://jsfiddle.net/L8ztR/

挙動がおかしそうに見えますが…

ありがとう！

編集: .stop(true,true) を使用して修正!