CODEWITHSUNDEEP
jqueryanimation
LouieV
LouieV

Reputation: 1052

Animating a border color

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

Upvotes: 0

Views: 190

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

For color animation You need to use jQueryUi or 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/

Upvotes: 2

wirey00
wirey00

Reputation: 33661

You need to check border-top-color/left/right/bottom for IE - also border color returns rgb color code. Last thing you need is to include 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/

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

No need for jQuery, pure CSS works just fine:

#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

Upvotes: 2

Related Questions