Javascript glow/pulsate effect to stop on click

Question

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?

I look forward to an answer from you good people.

Scott.

Answer 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();
});

Here's a working jsFiddle.