Javascript发光/脉动效果在点击时停止 [英] Javascript glow/pulsate effect to stop on click

问题描述

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

I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it.

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

        pulsate();
     }); 
    </script>

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

So basically, I just need to know what I need to add here so that the effect stops once it has been clicked.

如果再次单击相同的链接，则页面的显示部分将隐藏-要再次单击后重新开始效果是否很麻烦?

If the same link is clicked again, the revealed section of the page will hide - is it too much trouble to make the effect start again after a second click?

我期待您的好人回答.

斯科特.

推荐答案

仅绑定到click事件并调用停止().您还应该确保不透明度已恢复为 1 :

Simply bind to the click event and call stop(). You should also ensure that the opacity has been restored to 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 .

这篇关于Javascript发光/脉动效果在点击时停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！