Question

我有一个带黑色边框的元素，我想让它成为“脉冲”。我正在用.animate()接近这个，但我似乎无法得到我想要的结果。我做了一个小提琴，但由于某种原因没有任何工作，但我的开发动画最初工作。边框设置为透明，就是这样。 Here是小提琴。谢谢

Answer 1

对于彩色动画您需要使用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);

演示--> http://jsfiddle.net/dSh97/8/

Answer 2

不需要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

Answer 3

你需要检查border-top-color/left/right/bottom的IE - 边框颜色返回rgb颜色代码。你需要的最后一件事是包含jQuery UI。

$(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/

动画边框颜色

3 个答案: