JavaScript efekt blasku/pulsacji, aby zatrzymać się po kliknięciu

Question

Mam następujący kod JavaScript, aby łącze tekstowe świeciło się/pulsowało w sposób ciągły. Ten link pokazuje kolejną sekcję tej samej strony, więc chciałbym, aby zatrzymało się po kliknięciu przez użytkownika.

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

     pulsate(); 
    }); 
    </script> 

Po prostu muszę wiedzieć, co muszę dodać, aby efekt został zatrzymany po kliknięciu.

Jeśli to samo łącze zostanie kliknięte ponownie, odsłonięty fragment strony zostanie ukryty - czy zbyt dużym kłopotem jest ponowne uruchomienie efektu po drugim kliknięciu?

Czekam na odpowiedź od was, dobrzy ludzie.

Scott.

Answer 1

Wystarczy połączyć się z wydarzeniem kliknięcia i zadzwonić pod numer stop(). Należy również upewnić się, że zmętnienie został przywrócony do :

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

Oto a working jsFiddle.

Answer 2

Rozwiązanie jest dość proste. Niech funkcja pulsate() upewni się, że .pulsate nie ma klasy stop przed wykonaniem tej czynności. Jeśli ma tę klasę, funkcja pulsate() po prostu ożywi połączenie z powrotem do pełnego krycia, ale nie będzie kontynuować pulsowania.

Przykład Jamesa działa również, ale ja wolę moje podejście, ponieważ jego sposób wiąże się z wydarzeniem click z .pulsate w kółko. Tego rodzaju rzeczy mogą powodować problemy w zależności od reszty strony.

żywo przykład: 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'); 
    }); 
});