5

我有以下 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>

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

如果再次点击相同的链接，页面显示的部分会隐藏——第二次点击后重新开始效果是不是太麻烦了？

期待各位好心人的回答。

斯科特。

4

2 回答 2

8

只需绑定到单击事件并调用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。

于 2011-10-08T12:46:18.950 回答
3

解决方案非常简单。让你的函数在做它的事情之前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-08T12:51:55.653 回答