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

我点击以下Javascript来连接文本链接发光/脉动。此链接显示同一页面的另一部分，因此我希望在用户点击它时停止。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。

来源

2011-10-08 scottk

这似乎危险地接近重现标签。如果行动是重要的，你可能应该简单的做，做出其他不太重要的选择，或者只是在后台进行... – Kzqai

有点像是的，但随着淡入淡出 - 不用担心它在页面上看起来不是很微妙的字体颜色。我只需要一旦它被点击就停下来。 – scottk

嘿，只要你有目的和适度地使用它，那么。：D – Kzqai

只需绑定到单击事件并致电stop()。你也应该确保透明度已经恢复到：

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

这里的a working jsFiddle。

来源

2011-10-08 12:46:18

我对这种方法感觉不太舒服。对于每个循环，$（'。pulsate'）'DOM元素都注册一个click函数。如果有5个元素并且它们循环约1分钟，则会有小于（5 * 60）的功能来阻止它。 –

@TalhaAhmedKhan当动画调用pulsate函数时，可以用一个参数来调用它，以告诉它不要注册点击处理程序。 –

@TalhaAhmedKhan，如果你有更好的答案，请发布。请不要完全改变我的回答（或任何其他人）并添加“编辑者”行。 –

该解决方案非常简单。让你的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'); 
    }); 
});

来源

2011-10-08 12:51:55 maxedison

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

回答

相关问题