停止元素跳动jquery

Question

我有以下 jquery，它使按钮链接跳动。

 $('#BtnBoxGreeting').effect('pulsate', { times: 3 }, 800,function(){
                                        setInterval(function(){
                                        $('#BtnBoxGreeting').show('pulsate', { times: 3 }, 800, '');
                                        },8000);
                                         });
                <% end %>
                $('#BtnBoxGreeting').click(function(){
                    $(this).stop();
                });

我希望效果在单击按钮时停止，但由于间隔循环，它只是继续进行。 单击按钮时如何停止动画？

Answer 1

1. 创建一个外部变量，例如 var pulsatingInterval

2. 为其分配 setInterval 调用：

   pulsatingInterval = setInterval(...);

3. 单击按钮时清除此间隔

   clearInterval(pulsatingInterval);

Answer 2

我发现以下解决方案对我来说最简单并且效果很好。

我为我想要脉动的元素提供了一个“脉动”类，如下所示：

<div id="buttons">
<%= link_to '', new_greeting_path, :remote => true, :id => "BtnBoxGreeting", :class => "button-post pulsate" %>
</div>

在“单击”按钮时，我删除了该类：

var greeting_timing = 8000;
             $('.pulsate').effect('pulsate', { times: 3 }, 800,function(){
                                    setInterval(showPulsating, greeting_timing);
                                });
                                function showPulsating(){
                                    $('.pulsate').effect('pulsate', { times: 3 }, 800, ''); 
                                }
                $("div#buttons>a").click(function(){
                    $(this).removeClass("pulsate");
                });

这样我就不必担心间隔再次开始。

Answer 3

当你 $(this).stop();这部分指的是按钮的点击动作，而不是效果。
在此处查看 .stop() 选项： http://api.jquery.com/stop/

我打赌像 $('#BtnBoxGreeting').stop() 这样的东西会起作用。

Answer 4

我认为您需要设置一个变量来指示是否单击停止。如果是这样，请勿在 setinterval 方法中执行脉动操作（在该变量上包含 if）。当然，一旦超时，就无法再停止脉动动作了。

例子：

var stopped = false;

$('#BtnBoxGreeting').effect('pulsate', { times: 3 }, 800,function(){ 
    setInterval(showPulsating, 8000); 
}); 

function showPulsating(){
   if(!stopped)
      $('#BtnBoxGreeting').show('pulsate', { times: 3 }, 800, ''); 
}

$('#BtnBoxGreeting').click(function(){ 
   stopped = true;
});