Hiệu ứng phát sáng/xung Javascript để dừng khi nhấp vào

Question

Tôi có Javascript sau để liên tục phát sáng liên kết văn bản. Liên kết này cho thấy một phần khác của cùng một trang vì vậy tôi muốn nó dừng lại khi người dùng đã nhấp vào nó.

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

     pulsate(); 
    }); 
    </script> 

Vì vậy, về cơ bản, tôi chỉ cần biết những gì tôi cần thêm ở đây để hiệu ứng dừng khi nó đã được nhấp.

Nếu cùng một liên kết được nhấp một lần nữa, phần được tiết lộ của trang sẽ ẩn - có quá nhiều rắc rối để làm cho hiệu ứng bắt đầu lại sau lần nhấp thứ hai không?

Tôi rất mong nhận được câu trả lời từ những người bạn tốt.

Scott.

Answer 1

Chỉ cần liên kết với sự kiện nhấp và gọi stop(). Bạn cũng nên đảm bảo rằng các opacity đã được phục hồi :

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

Dưới đây là a working jsFiddle.

Answer 2

Giải pháp khá đơn giản. Có chức năng pulsate() của bạn đảm bảo rằng .pulsate không có lớp học stop trước khi thực hiện. Nếu nó có lớp đó, thì hàm pulsate() sẽ đơn giản làm động liên kết trở lại độ mờ đục đầy đủ, nhưng không tiếp tục xung.

Ví dụ của James cũng hoạt động, nhưng tôi thích cách tiếp cận của tôi hơn vì cách của anh ấy liên kết sự kiện click với số .pulsate lặp đi lặp lại. Loại điều này có thể gây ra sự cố tùy thuộc vào phần còn lại của trang của bạn.

Sống dụ: 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'); 
    }); 
});