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.

Gonzalez

This seems perilously close to recreating the <blink> tag. If the action is that important, you should probably just make it simple to do, cut out other, less important choices, or just do it in the background in advance... – Ankledeep

kind of like <blink> yes but with a fade - don't worry it doesn't look quite as cheesy on the page in a subtle font colour. I just need it to stop once it has been clicked on. – Gonzalez

Heh, as long as you're using it with purpose and moderation, then. :D – Ankledeep

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.

Adman

I am not feeling very comfortable with that approach. For every loop the $('.pulsate') DOM elements are registering a click function. And if have let say 5 elements and they loop for around one minute there will be around less than (5*60) function to stop it. – Bismarck

@TalhaAhmedKhan When the pulsate function is called by the animation, you could have it be called with a parameter that tells it not to register the click handler. – Lucialucian

@TalhaAhmedKhan, if you have a better answer, post it. Please don't completely change my answer (or anyone else's) and add an "edit by" line. – Adman

Got that right ;). I do not have the better answer then Hill's, I think it suits the best. – Bismarck

@James Hill why does your fourth parameter on the animate function calls "pulsate" without especifying its a method? can it pass arguments? – Tutto

Answer 2

The solution is pretty simple. Have your pulsate() function make sure that .pulsate doesn't have the class stop before doing its thing. If it does have that class, then the pulsate() function will simply animate the link back to full opacity, but not continue the pulsating.

James' example works as well, but I prefer my approach because his way binds the click event to .pulsate over and over again. This kind of thing may cause problems depending on what the rest of your page is doing.

Live example: 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');
    });
});

Neomaneomah