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.

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.

• javascript
• jquery
• animation
• jquery-animate
• glow

Share Improve this question Follow edited Oct 8, 2011 at 12:51 James Hill 61.9k2222 gold badges149149 silver badges166166 bronze badges asked Oct 8, 2011 at 11:46 scottkscottk 5722 silver badges77 bronze badges 3

• 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... – Kzqai Commented Oct 8, 2011 at 11:57
• 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. – scottk Commented Oct 8, 2011 at 12:00
• Heh, as long as you're using it with purpose and moderation, then. :D – Kzqai Commented Oct 9, 2011 at 2:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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