Javascript发光/脉动效果停止点击

我有以下Javascript使文本链接连续发光/脉动。 此链接显示同一页面的另一部分，因此我希望一旦用户点击它就停止。

 $(document).ready(function() { function pulsate() { $(".pulsate").animate({opacity: 0.2}, 1200, 'linear') .animate({opacity: 1}, 1200, 'linear', pulsate); } pulsate(); });  

所以基本上，我只需要知道我需要在这里添加什么，以便一旦点击它就会停止效果。

如果再次单击相同的链接，页面的显示部分将隐藏 – 在第二次单击后再次启动效果是否太麻烦？

我期待着你们好人的回答。

斯科特。

Answer 1

只需绑定到click事件并调用stop（）即可 。 您还应确保不透明度已恢复为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(); }); 

这是一个有效的jsFiddle 。

Answer 2

解决方案非常简单。 你的pulsate()函数确保.pulsate在执行它之前没有类stop 。 如果它确实具有该类，则pulsate()函数将简单地将链接设置为完全不透明度，但不会继续脉动。

詹姆斯的例子也有效，但我更喜欢我的方法，因为他的方式将click事件一次又一次地绑定到.pulsate 。 这种事情可能会导致问题，具体取决于页面的其余部分。

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