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>

因此，基本上，我只需要知道我需要在此处添加的内容，以便单击效果即可停止。

如果再次单击相同的链接，页面的显示部分将被隐藏-再次单击后使效果再次开始是否太麻烦了？

我期待您的好人回答。

斯科特

最佳答案

只需绑定(bind)到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();
});

这是a working jsFiddle。