1

我正在使用 jQuery 为横幅制作动画，使用淡入、淡出和追加。我遇到的问题是，虽然已经生成了预期的结果，但每次我最小化或更改选项卡时，动画排队，然后当我再次打开它时网页会变得疯狂！

我怎样才能防止这种情况发生？我可以添加一个 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) 修复！

4

1 回答 1

0

尝试用它替换你的 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，或者多次调用此代码（不要这样做）

于 2013-10-14T15:02:30.040 回答