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

只需绑定到click事件并调用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.