Question

我使用jQuery动画横幅，使用fadein，fadeout和append。我遇到的问题是，虽然已经生成了所需的结果，但每当我最小化或更改标签时，动画排队，然后当我再次打开它时网页会变得疯狂！

如何防止这种情况发生？我可以添加一个if语句来检查动画是否已经在运行吗？我可以把它装瓶到一个动画吗？

考虑：

$(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）！

Answer 1

尝试用

替换你的setInterval调用

 var continueLooping = true;
(function theLoop (){
  if (!fElement.data('paused')) {
            fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
    } else {
         console.log('waiting...');
    }
  if(continueLooping){
   setTimeout(theLoop, 5000);
   }
})();

它的作用与setInterval完全相同，只是代码在启动下一个Timeout迭代之前实际等待执行。关于惊人的更多解释： http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

然后您可以而不是设置暂停或不暂停的数据将continueLooping设置为true或false，或多次调用此代码（不要这样做）

jquery setinterval最小化队列

1 个答案: