How to start a pulse animation after it has stopped

Question

I would like to pulsate a div (a down arrow) on pageload. When the user clicks the down arrow another div slidetoggles and the pulse animation stops. When the down arrow is clicked again the other div slides up and the down arrow begins to pulsate again.

Here is a similar idea but the pulse just stops:

jQuery(".pulse").effect("pulsate", { times:1000 }, 2000).click(function(){
    jQuery(this).stop(true, true);
});

Answer 1

As I understand it the .effect() method doesn't continue the animation indefinitely, so you'd need to keep calling it each time it finishes, perhaps by triggering the animation from inside a function that is also provided as the complete callback.

As for stopping it while the other div is displayed and restarting it afterwards, you can use a flag to decide which way to toggle, perhaps something like this:

function keepPulsing() {
    $pulse.effect("pulsate", 500, keepPulsing);
}
var pulsing = true,
    $pulse = jQuery(".pulse").click(function(){
        if (pulsing) {
            jQuery(".other").slideDown();
            jQuery(this).stop(true, true).css("opacity",1);
        } else {
            jQuery(".other").slideUp();
            keepPulsing();
        }
        pulsing = !pulsing;        
    });
keepPulsing();

Demo: http://jsfiddle.net/87hy2/