jquery - 淡出标签的边框

Question

我正在尝试使用 jQuery 淡出 html 标签的边框。经过大量搜索，我知道.animate()jQuery的功能可能对此有用。但我无法正确实施。这是我正在研究的jsfiddle 。我尝试$("#lbl").animate({border-bottom: 'border-bottom: 1px solid #D8D8D8'});在按钮单击方法中使用。但它没有用。请让我知道，我做错了什么？或者有没有其他方法可以实现这一目标？

Answer 1

使用jQuery UI并为边框颜色设置动画，如下所示：

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

演示：http: //jsfiddle.net/7Vc9u/9/

---

更新。似乎border-color(or borderColor) 不是用于动画的跨浏览器属性，并且在 FF 和 IE 中不起作用（请参阅下面的评论）。我们可以单独更改每个边框的属性。它应该可以正常工作。

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

演示：http: //jsfiddle.net/7Vc9u/11/

Answer 2

尝试这个 ：

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

这将在 1 秒的持续时间内将边框颜色设置为白色（第二个参数animate- 1000 毫秒）。

注意使用.animate()你需要使用jQuery UI

在这里工作 jsfiddle