从脉动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

我发现下面的解决方案最简单的，我和工作得很好。

我给一个班“脉动”到我要跳动的元素如下：

<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 2

1. 做一个外部变量，说var pulsatingInterval

2. 分配setInterval调用它：

   pulsatingInterval = setInterval(...);

3. 清除按钮此区间单击

   clearInterval(pulsatingInterval);

Answer 3

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

我打赌像$（'＃BtnBoxGreeting'）。stop（）将工作。

Answer 4

我认为你需要设置一个变量来指示停止是否被点击。如果是这样，请不要在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; 
});