Can you toggle a pulsing animation?

Question

I would like to have an image of an arrow pulsating, when the user clicks the arrow a div slides down and the pulsating arrow animation stops. When the user clicks the arrow again the div slides up and the arrow continues to pulsate.

I can toggle. I can pulse. However, I am unsure how to go about toggling a pulsating animation. If someone could point me in the right direction that would be great!

Many thanks.

$(document).ready(function(){
{
    $(".arrow_down_grey").effect( "pulsate", 
      {times:5}, 3000 );
  }
    $('.arrow_down_grey').click(function(){
         $(".arrow_down_grey").stop().effect();
        $(".hiddenDiv").slideToggle();

});
});

Brian Vanderbusch · Accepted Answer · 2013-10-09T16:08:41.210

1

jQuery has a .stop() method that halts animations. You would need to listen for clicks, and then start/stop the animation accordingly using .stop(). I'm thinking you would need to use the true flag to clear your animation queue, so the stop doesn't just "pause" the animation, but that's up to you. You would then use a closure to keep track of the "toggle status" and start the animation back up when your div is toggled the other way.

$('#animation').stop(false);

jQuery .stop documentation: http://api.jquery.com/stop/

edited Oct 09 '13 at 16:08

answered Oct 09 '13 at 16:02

Brian Vanderbusch

3,313
5
31
43

Thank you. I am aware of this. However how do I start the animation again onclick? – danelig Oct 09 '13 at 16:03
can you provide your animation code? if you do, I'll show you how to add a closure and restart it/toggle it off/on – Brian Vanderbusch Oct 09 '13 at 16:07
Many thanks for the help. I will code around further and post up my code. – danelig Oct 09 '13 at 16:16
I have tried using the `.stop()` method but the pulsing animation doesn't cease to trigger. Thanks again. – danelig Oct 18 '13 at 17:38
well... it would help if you didn't chain the `effect()` call after you call `.stop()`. Give that the axe. – Brian Vanderbusch Oct 19 '13 at 06:56
Ok, I have axed that. The animations does stop...eventually but not on the click. I just want to toggle the pulsate animation on click. – danelig Oct 22 '13 at 16:56
I am still struggling with this animation toggle, any further help would be so much appreciated. – danelig Oct 24 '13 at 19:24

score 0 · Answer 2 · answered Oct 25 '13 at 15:07

$(document).ready(function() {
    function pulsate() {
        $(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
                     .animate({ opacity: 1 }, 1200, 'linear', pulsate)
                     .click(function() {
                         $(this).animate({ opacity: 1 }, 1200, 'linear');
                         $(this).stop();
                     });
        }

    pulsate();
});

This code works but how would you start the pulse animation again?

Can you toggle a pulsing animation?

2 Answers2