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

i like my way more... >.> No plugins needed.

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 2

The solution below should meet all of your posted criteria:

Wait 5000 ms (5 sec), then animate a fade out of the border that lasts 500 ms (.5 sec).

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

Working example: http://jsfiddle.net/ECRLW/

Since the above solution seems to be unable to animate the borderWidth fade with some browsers, the only other way I would know how to accomplish what you want with jQuery would be to use 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);

Working example: http://jsfiddle.net/mmfMG/

Answer 3

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 4

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...

Answer 5

I'm afraid there isn't a clean 100% working way of doing so.

• You could animate the border-width, but that won't be "fading out".
• You could animate the border-color, but that would require an extra library on top of jQuery, plus it will break if you change the background.
• You can fake the border by placing 2 divs on top of each other with a small space, and fade the outer one out, but that isn't really a border and if you'd want something fancy such as a dashed or dotted border, it won't be that simple.

If you don't plan on having something more fancy than a simple solid border, I suggest using jQuery to generate the 2 divs solution, and then fade out the outer (border) div. Like Joey's answer above me.