Possible to fade out div border?

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

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 3

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 4

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.

Answer 5

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