0

私は次のようにアニメーションを継続的にループする関数を設定しています：

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

#stopbuttonスニペットは期待どおりに機能しますが、外部div（たとえば、テスト目的）のときにループをキャンセルするための最も効率的な方法を探しています。したがって、ユーザーがdivをクリックする#stopbuttonと、boxGlow()関数は停止し、不透明度は0にリセットされます。どこから始めればよいかについての例は大歓迎です。

4

3 に答える 3

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);    
    }
}
于 2013-01-04T00:18:01.380 に答える
0

JavaScript タイミング イベントでこれを行う方が良いと思います: JavaScript タイミング イベント
このように:

 $(function()
    {
       var intv = setInterval(function()
       {
          $("#not_bg").animate({opacity:0}, 1000);
          $("#not_bg").animate({opacity:1}, 1000);
       },2000);
       $('#stop').click(function()
       {
          window.clearInterval(intv);
       });
    }};
于 2013-01-04T00:18:07.090 に答える
0

クリック イベントが発生したときに、クラスを 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/

于 2013-01-04T00:23:15.197 に答える