stop element from pulsating jquery

I have the following jquery that pulsates a button link.

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

I want the effect to stop when the button is clicked but it just keeps on going because of the interval loop. How can I stop the animation when the button is clicked?

1. Make an external variable, say var pulsatingInterval

2. Assign setInterval call to it:

   pulsatingInterval = setInterval(...);

3. Clear this interval on button click

   clearInterval(pulsatingInterval);

I found the following solution the easiest for me and works very well.

I give a class 'pulsate' to the element I want to pulsate as follows:

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

On the 'click' of the button I remove the class:

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");
                });

This way I did not have to worry about the Interval starting again.

when you $(this).stop(); the THIS part refers to the click action of the button, not the effect. check out the .stop() option here: http://api.jquery.com/stop/

I bet something like $('#BtnBoxGreeting').stop() will work.

I think you need to set a variable that indicates whether stop is being clicked. If so, do not execute the pulsate action in the setinterval method (include an if on that variable there). Of course, once the timeout is expired, you cannot stop the pulsate action anymore.

Example:

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;
});