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

});
});

Answer 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/

Answer 2

$(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?