javascript - DIV 边框上的脉冲效果

Question

我正在尝试实现边框的脉冲效果。似乎不起作用。如何为边框制作脉冲效果？

CSS:

.DivBorder{
    border: 2px;
    border-color: #000;
 }

jQ:

function pulseEff(){ 
   $('.DivBorder').delay(1000)
      .animate({ 'border-color': 'Transparent'}, 100)
      .delay(1000)
      .animate( {'border-color': '#333'
      }, 100);
}; 

Answer 1

没有setInterval()的解决方案，它会持续运行并且无法轻易停止。

<强> Fiddle

(function pulseEff() {
    $('.DivBorder').delay(1000).animate({
        'border-color': 'transparent'
    }, 100).delay(1000).animate({
        'border-color': '#333'
    }, 100, pulseEff);
})();

您可以使用简单的淡入/淡出以及间隔。

<强> fadein/out Fiddle

function pulseEff(){ 
   $('.ImgBorder').fadeOut(300).fadeIn(300);
};
var Interval;
$('#start').click(function(){
    Interval = setInterval(pulseEff,600);
});

或使用您的代码；您需要将动画时间从 100 增加到更相关的值，因为 100 毫秒太短而无法计算。

<强> animate Fiddle

function pulseEff() {
    $('.DivBorder').delay(1000)
        .animate({
        'border-color': 'transparent'
    }, 600).delay(1000)
        .animate({
        'border-color': '#333'
    }, 600);
};
var Interval;
$('#start').click(function () {
    Interval = setInterval(pulseEff, 600);
});