0

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);
});
danelig
  • 373
  • 1
  • 4
  • 18

1 Answers1

0

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/

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • `!` is the logical NOT operator, which returns `false` if its single operand can be converted to `true`, and otherwise returns `true`. So if `pulsing` is `true` then `!pulsing` is `false`, and vice versa; the line `pulsing = !pulsing` basically sets `pulsing` to the opposite of whatever it was. (If you're going to be coding in JS you really should familiarise yourself with [all of the operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) - the only operators I don't use on a regular basis are the bitwise ones.) – nnnnnn Oct 27 '13 at 21:03