0

I have an element with a black border that I want to make it "pulse". I am approaching this with .animate() but I cant seem to get the results I want. I made a fiddle but for some reason nothing is working on it yet on my dev the animation works initially. The border gets set to transparent and that is it. Here is the fiddle. Thanks

4

3 回答 3

2

彩色动画需要使用jQueryUi或者颜色插件

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/

于 2013-06-18T15:36:09.293 回答
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}
}

演示

于 2013-06-18T15:37:49.237 回答
1

您需要检查border-top-color/left/right/bottomIE - 边框颜色也返回 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/

于 2013-06-18T16:01:20.257 回答