CODEWITHSUNDEEP
jqueryeffect
chell
chell

Reputation: 7866

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

Upvotes: 0

Views: 2008

Answers (4)

chell
chell

Reputation: 7866

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.

Upvotes: 1

Igor Dymov
Igor Dymov

Reputation: 16460

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

Upvotes: 2

Bas Slagter
Bas Slagter

Reputation: 9929

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

Upvotes: 0

mrRuben
mrRuben

Reputation: 1

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.

Upvotes: 0

Related Questions