Question

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, '');
                                        },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?

Answer 1

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.