efecto de brillo/pulsación de Javascript para detener al hacer clic

Question

Tengo el siguiente código JavaScript para hacer que un enlace de texto brille/pulse continuamente. Este enlace revela otra sección de la misma página, por lo que me gustaría que se detuviera una vez que el usuario ha hecho clic en ella.

<script type="text/javascript"> 
    $(document).ready(function() { 
     function pulsate() { 
      $(".pulsate").animate({opacity: 0.2}, 1200, 'linear') 
         .animate({opacity: 1}, 1200, 'linear', pulsate); 
     } 

     pulsate(); 
    }); 
    </script> 

Básicamente, solo necesito saber qué necesito agregar aquí para que el efecto se detenga una vez que se ha hecho clic.

Si se hace clic nuevamente en el mismo enlace, la sección revelada de la página se ocultará: ¿es demasiado problema hacer que el efecto comience nuevamente después de un segundo clic?

Espero una respuesta de ustedes, buenas personas.

Scott.

Answer 1

Simplemente agréguese al evento click y llame al stop(). También debe asegurarse de que la opacidad ha sido restaurado a :

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

Aquí es a working jsFiddle.

Answer 2

La solución es bastante simple. Haga que su función pulsate() se asegure de que .pulsate no tenga la clase stop antes de hacer su trabajo. Si tiene esa clase, la función pulsate() simplemente animará el enlace de nuevo a la opacidad completa, pero no continuará la pulsación.

El ejemplo de James también funciona, pero prefiero mi enfoque porque su camino vincula el evento click al click una y otra vez. Este tipo de problema puede causar problemas dependiendo de lo que esté haciendo el resto de la página.

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