jquery - jQuery - 结束“连续”动画/功能

Question

我有一个函数设置来连续循环动画，如下所示：

$(document).ready(function() {
    function boxGlow() {
        $("#not_bg").animate({opacity:0}, 1000);
        $("#not_bg").animate({opacity:1}, 1000, boxGlow);    
    }
});

该片段按预期工作，但我正在寻找最有效的方法来取消外部 div 时的循环（例如#stopbutton，出于测试目的）。因此，当用户单击 div 时#stopbutton，该boxGlow()功能将停止，并且不透明度重置为 0。非常感谢任何有关从何处开始的示例。

Answer 1

一个非常简单的方法是设置一个标志。

$(document).ready(function() {

    var stop = false;

    $('#stopbutton').on('click', function() {
          stop = true;
    });

    function boxGlow() {

        if ( stop ) return;

        $("#not_bg").animate({opacity:0}, 1000);
        $("#not_bg").animate({opacity:1}, 1000, boxGlow);    
    }
}

Answer 2

我认为最好使用 javascript 计时事件来做到这一点：JavaScript Timing Events
像这样：

 $(function()
    {
       var intv = setInterval(function()
       {
          $("#not_bg").animate({opacity:0}, 1000);
          $("#not_bg").animate({opacity:1}, 1000);
       },2000);
       $('#stop').click(function()
       {
          window.clearInterval(intv);
       });
    }};

Answer 3

当点击事件发生时，您可以向 div 添加一个类：

$(document).ready(function() {
    $('#stopbutton').click(function(){
        $('#not_bg').stop().addClass('done').css({opacity:0});
    });
    (function boxGlow() {
        if(!this || !$(this).is('.done')){
            $("#not_bg").animate({opacity:0}, 1000);
            $("#not_bg").animate({opacity:1}, 1000, boxGlow);
        }
    })();
});

这是一个演示：http: //jsfiddle.net/N42rn/