停止脉动jquery的元素答案

【问题标题】：stop element from pulsating jquery停止脉动jquery的元素
【发布时间】：2011-10-05 10:25:15
【问题描述】：

我有下面的 jquery 可以跳动一个按钮链接。

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

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

【问题讨论】：

标签： jquery effect

【解决方案1】：

创建一个外部变量，比如var pulsatingInterval
分配setInterval 调用它：

pulsatingInterval = setInterval(...);
点击按钮清除此间隔

clearInterval(pulsatingInterval);

【讨论】：

【解决方案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");
                });

这样我就不用担心间隔重新开始了。

【讨论】：

【解决方案3】：

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

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

【讨论】：

this inside $('#BtnBoxGreeting').click 将引用该对象本身

【解决方案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;
});

【讨论】：