Импульсный эффект на границе 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 вместе с интервалом.

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