Javascript 发光/脉动效果在点击时停止

Question

我有以下 Javascript 来使文本链接连续发光/脉动。此链接显示同一页面的另一部分，因此我希望它在用户单击它后停止。

    <script type="text/javascript">
    $(document).ready(function() {
        function pulsate() {
          $(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
                       .animate({opacity: 1}, 1200, 'linear', pulsate);
        }

        pulsate();
     }); 
    </script>

所以基本上，我只需要知道需要在此处添加什么，以便单击后效果就会停止。

如果再次点击同一个链接，页面显示的部分就会隐藏——再次点击后再次启动效果是否太麻烦？

我期待你们好心人的答复。

斯科特.

Answer 1

只需绑定到点击事件并调用 stop() 即可。您还应该确保不透明度已恢复为 1：

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

    pulsate();
});

这是一个工作的 jsFiddle。

Answer 2

解决方案非常简单。让您的 pulsate() 函数在执行其操作之前确保 .pulsate 不具有类 stop。如果它确实具有该类，则 pulsate() 函数将简单地将链接动画化回完全不透明，但不会继续脉动。

James 的示例也有效，但我更喜欢我的方法，因为他的方法一遍又一遍地将 click 事件绑定到 .pulsate。这种事情可能会导致问题，具体取决于页面的其余部分正在做什么。

实例：http://jsfiddle.net/2f9ZU/

function pulsate() {
    var pulser = $(".pulsate");
    if(!pulser.hasClass('stop')){
        pulser.animate({opacity: 0.2}, 1200, 'linear')
        .animate({opacity: 1}, 1200, 'linear', pulsate);
    }else{
        pulser.animate({opacity:1},1200)
            .removeClass('stop');
    }
}

$(document).ready(function() {
    pulsate();
    $('a').click(function(){
        $('.pulsate').addClass('stop');
    });
});