单击时停止的 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

只需绑定(bind)到点击事件并调用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();
});

这是 a working jsFiddle .