Javascript effect for glow / ripple to stop click

Question

I have the following Javascript for continuous lighting / ripple of a text link. This link shows another section of the same page, so I would like it to stop as soon as the user 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 after clicking it.

If the same link is clicked again, the displayed section of the page will be hidden - are there too many problems for the effect to start again after the second click?

I look forward to hearing from you good people.

Scott.

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.

Answer 2

. pulsate() , .pulsate stop, . , pulsate() , .

, , click .pulsate. , .

: http://jsfiddle.net/2f9ZU/

function pulsate() {
    var pulser = $(".pulsate");
    if(!pulser.hasClass('stop')){
        pulser.animate({opacity: 0.2}, 1200, 'linear')
        .animate({opacity: 1}, 1200, 'linear', pulsate);
    }else{
        pulser.animate({opacity:1},1200)
            .removeClass('stop');
    }
}

$(document).ready(function() {
    pulsate();
    $('a').click(function(){
        $('.pulsate').addClass('stop');
    });
});