可以淡出div边框吗？

Question

我知道您可以使用 jQuery 淡出 <div>，但我想知道是否可以淡出 <div> 的边框？

所以我有我的<div>：

<div class="confession" style="border:3px solid #DDD;">
</div>

我只是想知道如何让边框在 5 秒后淡出。

---

更新

任何仍想这样做的人都可以使用 CSS3 过渡来做到这一点。
请务必检查它是否在您支持的浏览器功能范围内：http://caniuse.com/#search=transition

例子

div {
    border: 4px solid red;
    -webkit-transition: border-color .25s ease;
       -moz-transition: border-color .25s ease;
        -ms-transition: border-color .25s ease;
         -o-transition: border-color .25s ease;
            transition: border-color .25s ease;
}

div:hover {
    border-color: none;
}

Answer 1

您需要为此使用 jQuery UI（彩色动画）：

$(".confession").animate({
   borderLeftColor: "white",
   borderTopColor: "white",
   borderRightColor: "white",
   borderBottomColor: "white",
}, 3000);

（它不适用于borderColor，至于“透明”它会逐渐变为白色）

http://jsfiddle.net/Jacek_FH/kxCht/3/

具有类似（相同？）功能的插件：

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

Answer 2

真正的淡出动画需要我们使用 Alpha 通道。 AFAIK jQuery UI 对rgba() 的使用非常错误，所以我们可以使用step 属性来改变边框的不透明度，如下所示：

setTimeout(function(){

    var div = $('.confession');
    $({alpha:1}).animate({alpha:0}, {
        duration: 1000,
        step: function(){
            div.css('border-color','rgba(0,0,0,'+this.alpha+')');
        }
    });

}, 5000);

我使用了黑色边框，因此您可以注意到效果，但您可以将其更改为您想要的任何颜色，例如rgba(221,221,221,'+this.alpha+')'); 为#DDD

工作示例：http://jsfiddle.net/victmo/2Xazx/

干杯！

顺便说一句，这种方法不需要插件...

Answer 3

我更喜欢我的方式... >.> 不需要插件。

http://jsfiddle.net/MJD5B/2

<div class="confession" style="margin:3px;position:relative">
    text
    <div class="fakeBorder"></div>
</div>

.fakeBorder
{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
    border:3px solid #DDD;
    margin:-3px;
}

Answer 4

恐怕没有一种 100% 干净的工作方式可以做到这一点。

• 您可以为边框宽度设置动画，但这不会“淡出”。
• 您可以为边框颜色设置动画，但这需要在 jQuery 之上添加一个额外的库，而且如果您更改背景，它会中断。
• 您可以通过将 2 个 div 彼此叠放并留出一小块空间来伪造边框，然后将外面的 div 淡出，但这并不是真正的边框，如果您想要一些花哨的东西，例如 @987654321 @或dotted边框，不会那么简单。

如果您不打算拥有比简单的实心边框更花哨的东西，我建议使用 jQuery 生成 2 div 解决方案，然后淡出外部（边框）div。就像乔伊在我上面的回答一样。

Answer 5

以下解决方案应满足您发布的所有标准：

等待 5000 毫秒（5 秒），然后制作一个持续 500 毫秒（0.5 秒）的淡出边界动画。

$(".confession").delay(5000).animate({borderWidth: "0"}, 500);

工作示例：http://jsfiddle.net/ECRLW/

由于上述解决方案似乎无法使用某些浏览器为边框宽度渐变设置动画，我知道如何使用 jQuery 完成您想要的唯一方法是使用 setTimeout()：

function shrinkBorder(){
    var e = $(".confession");
    var eBorderWidth = e.css("border-width");
    if(eBorderWidth != "0px"){
        e.css("border-width",(eBorderWidth.split("px")[0]-1));
        setTimeout(shrinkBorder, 50);
    }
}

setTimeout(shrinkBorder, 5000);

工作示例：http://jsfiddle.net/mmfMG/