Question

我正在使用这样的递归函数在我的页面上的div上创建连续的脉冲效果并且它正在工作。但是，看起来fadeOut()会从文档流中删除div元素，因此我页面上其他一些元素的位置会发生偏移。是否有替代此功能提供重复脉冲效果的相同功能？

代码

(function pulse(){
            if(needStop) {
                needStop = false;
                return;
            }
        $('#player1,#score1').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse);
    })();

Answer 1

如果你不介意使用插件，这里有一个很好的jQuery：

http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

更新了链接：

http://jsoverson.github.com/jquery.pulse.js/

Answer 2

尝试设置动画的不透明度。

$('#player1,#score1').delay(200).animate({
    opacity: 0
}, 'slow', function(){
    setTimeout(function(){
        $('#player1,#score1').delay(50).animate({
            opacity: 0
        }, 'slow', pulse );
);

http://api.jquery.com/animate/

https://developer.mozilla.org/en/docs/DOM/window.setTimeout

Answer 3

你也可以使用CSS，也许更少的代码，这个来源很棒： http://daneden.me/animate/build/

只需添加和删除css类

即可应用所有这些效果

替代fadeOut（）来创建脉冲效果

3 个答案: