2013-03-10 95 views
0

我已经成功地获得了这个工作,但我在网站上有很多按钮,我想脉冲,目前我正在用id做这个,但我想移动到更灵活的东西并使用一个班级来选择哪些按钮应该脉动。这是一个JSFiddle脉冲按钮HTML,jQuery,jQueryUI

我看到的问题,至少在我的浏览器(Mac上的谷歌浏览器25.0)是按钮按预期脉冲,但脉冲输出缓慢,然后下一个脉冲需要几秒钟就可以触发,然后下一次更改需要更长的时间,它似乎陷入了某种程度。这里是动画脚本:

function pulseIn() { 
    $(".pulse").animate({ 
     backgroundColor: "rgba(144,238,144,0.5)" 
    }, 1000, 'swing', function() { 
     pulseOut(); 
    }); 
} 

function pulseOut() { 
    $(".pulse").animate({ 
     backgroundColor: "rgba(0,0,0,0.5)" 
    }, 1000, 'swing', function() { 
     pulseIn(); 
    }); 
} 

pulseIn(); 

回答

1

我已经为你updated your code。这应该通过一个特定的控制脉冲和脉冲输出。在你的代码中,一旦第一个控件完成脉冲输入,你执行了pulseOut,它选择了包括第二个控件在内的所有.pulse,即使它还没有完成运行它的pulseIn(有点混淆解释,但希望你能获得主要内容)。

$('.pulse').each(function(){ 
    pulseIn($(this)); 
}); 

function pulseIn(control) { 
    control.animate({ 
     backgroundColor: "rgba(144,238,144,0.5)" 
    }, 1000, 'swing', function() { 
     pulseOut(control); 
    }); 
} 

function pulseOut(control) { 
    control.animate({ 
     backgroundColor: "rgba(0,0,0,0.5)" 
    }, 1000, 'swing', function() { 
     pulseIn(control); 
    }); 
} 
+0

真棒!非常感谢你,从来没有想过这样做 – SnareChops 2013-03-11 01:16:56

0

我写了一个小片段,可以不使用jQuery UI - 只使用jQuery。

function fadeBtn(el, fadeOutSpeed, fadeInSpeed){ 
    el.fadeOut(fadeOutSpeed, function(){ 
     jQuery(this).fadeIn(fadeInSpeed, function(){ 
      fadeBtn(el, fadeOutSpeed, fadeInSpeed); 
     }); 
    }); 
} 

fadeBtn(jQuery('.pulseBtn'), 750, 2500); 

的jsfiddle:http://jsfiddle.net/f5q6kuse/