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

制作一个外部变量，比如var pulsatingInterval
分配setInterval来电：

pulsatingInterval = setInterval(...);
点击按钮
清除此间隔
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");
                });

这样我就不必担心Interval会再次开始。

Answer 3

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

我打赌像$（'＃BtnBoxGreeting'）.stot（）会起作用。

Answer 4

我认为您需要设置一个变量来指示是否单击了stop。如果是这样，请不要在setinterval方法中执行pulsate操作（在那里包含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;
});

停止脉动jquery的元素

4 个答案: