Question

I am trying to fadeout the border of a html label using jQuery. After searching a lot, I get to know that .animate() function of jQuery may be useful for that. But I am not able to implement it correctly. Here is the the jsfiddle on which, I am working on.
I tried using $("#lbl").animate({border-bottom: 'border-bottom: 1px solid #D8D8D8'}); in the button clicked method. But it didn’t work. Please let me know, what am I doing wrong? OR Is there any other way to achieve this?

Answer 1

Use jQuery UI and animate the border color as follows:

$("#lbl").animate({
    "border-color": "#fff"
});

DEMO: http://jsfiddle.net/7Vc9u/9/

---

UPDATE. It seems that border-color (or borderColor) is not that cross-browser property for animating and it doesn’t work in FF and IE (see comment below). We can change properties of each border separately. It should work fine.

$("#lbl").animate({
    "borderBottomColor": "#fff",
    "borderLeftColor": "#fff",
    "borderRightColor": "#fff",
    "borderTopColor": "#fff"
});

DEMO: http://jsfiddle.net/7Vc9u/11/