javascript - 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

据我了解，该.effect()方法不会无限期地继续动画，因此您需要在每次完成时继续调用它，也许是通过从也作为完整回调提供的函数内部触发动画。

至于在显示另一个 div 时停止它并在之后重新启动它，您可以使用一个标志来决定切换的方式，可能是这样的：

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

演示：http: //jsfiddle.net/87hy2/