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

我有以下 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>

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

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

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

Scott.

只需绑定点击事件并调用stop() http://api.jquery.com/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();
});

Here's 一个工作中的 jsFiddle http://jsfiddle.net/JamesHill/EfjT5/.