Анимация цвета рамки

Question

У меня есть элемент с черной рамкой, который я хочу сделать «пульсом». Я приближаюсь к этому с .animate(), но я не могу получить результаты, которые я хочу. Я сделал скрипку, но по какой-то причине ничего не работает над этим, но на моем dev анимация работает изначально. Граница становится прозрачной, и это все. Here - это скрипка. Благодаря

Answer 1

Вам необходимо проверить border-top-color/left/right/bottom для IE - также цвет границы возвращает код цвета rgb. Последнее, что вам нужно, это включить пользовательский интерфейс jQuery.

$(document).ready(function(){ 
    var interval = setInterval(function() { 
     var $el = $('#live-feed-wrapper div:first-child'); 
     // if not black then make black 
     if ($el.css('border-top-color').replace(/\s/g,'') != 'rgb(0,0,0)') { 
     $el.animate({'borderColor': 'black'}); 
     } 
     else { 
     $el.animate({'borderColor': 'transparent'}); 
     } 
    },500); 
}); 

http://jsfiddle.net/QM9QT/

Answer 2

Для цветовой анимации Вы должны использовать jQueryUi или color plugin

var $el = $('#live-feed-wrapper div:first-child'); 
var interval = setInterval(function() { 
    if ($el.data('toggle')) { 
     $el.animate({ 
      'borderColor': 'black' 
     }); 
     $el.data('toggle', false); 
    } else { 
     $el.animate({ 
      'borderColor': 'transparent' 
     }); 
     $el.data('toggle', true); 
    } 
}, 500); 

Demo -->http://jsfiddle.net/dSh97/8/

Answer 3

Нет необходимости в JQuery, чистый CSS работает просто отлично:

#live-feed-wrapper div:first-child { 
    animation: pulse 0.5s linear infinite alternate; 
    -webkit-animation: pulse 0.5s linear infinite alternate; 
} 
@keyframes pulse { 
    from {border-color:black} 
    to {border-color:transparent} 
} 
@-webkit-keyframes pulse { 
    from {border-color:black} 
    to {border-color:transparent} 
} 

Demo