Possible to fade out div border?

Question

I know you can fade out a <div> with jQuery, but I was wondering if it's possible to fade out a border for a <div>?

So I've got my <div>:

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

And I'd just like to some how make that border fade out after 5 seconds.

---

update

Anyone still wanting to do this can do this with CSS3 transitions.
Just be sure to check it's within your supported browsers capability: http://caniuse.com/#search=transition

example

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

You need to use jQuery UI for that (color animation):

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

(it's not working with borderColor and as for "transparent" it fades to white anyway)

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

plugin with the similar (same?) capability:

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

Answer 2

A real fade out animation would require us to use the alpha channel. AFAIK jQuery UI's use of rgba() is very buggy, so we can use the step property to change the opacity of the border like this:

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);

I used a black border so you can notice the effect, but you can change it to whatever color you want, for example rgba(221,221,221,'+this.alpha+')'); for #DDD

Working example: http://jsfiddle.net/victmo/2Xazx/

Cheers!

BTW, no plugins needed for this approach...