從脈動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; 
});