可以淡出div边界？

Question

我知道你可以<div>用jQuery 淡出一个,但我想知道是否有可能淡出一个边界<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;
}