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

Javascript glow/pulsate effect to stop on click

本文关键字：发光 脉动 Javascript      更新时间：2023-09-26

我有下面的Javascript使一个文本链接发光/脉动连续。这个链接显示了同一页面的另一部分，所以我希望它在用户点击后停止。

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

基本上，我只需要知道我需要在这里添加什么以便在点击后效果停止

如果再次点击相同的链接，页面的显示部分将隐藏-是不是太麻烦了，使效果再次开始后，第二次点击?

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

Scott。

只需绑定到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();
});

解决方案非常简单。让你的pulsate()函数确保.pulsate在做它的事情之前没有stop类。如果它确实有这个类，那么pulsate()函数将简单地将链接动画回完全不透明度，但不继续脉动。

James的例子同样有效，但我更喜欢我的方法，因为他的方法将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');
    });
});
相关文章：