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.

This seems perilously close to recreating the 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... — Kzqai, Oct 08 '11 at 11:57
kind of like 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. — scottk, Oct 08 '11 at 12:00
Heh, as long as you're using it with purpose and moderation, then. :D — Kzqai, Oct 09 '11 at 02:27

James Hill · Accepted Answer · 2013-02-19T12:11:41.793

8

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.

edited Feb 19 '13 at 12:11

answered Oct 08 '11 at 12:46

James Hill

60,353
20
145
161

2

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. – Talha Ahmed Khan Feb 19 '13 at 11:22
@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. – Joshua Dwire Feb 19 '13 at 11:34
@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. – James Hill Feb 19 '13 at 12:12
Got that right ;). I do not have the better answer then Hill's, I think it suits the best. – Talha Ahmed Khan Feb 20 '13 at 12:24
@James Hill why does your fourth parameter on the animate function calls "pulsate" without especifying its a method? can it pass arguments? – Fernando Santiago May 31 '13 at 23:29

score 3 · Answer 2 · answered Oct 08 '11 at 12:51

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

Javascript glow/pulsate effect to stop on click

2 Answers2

Linked