Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
334 views
in Technique[技术] by (71.8m points)

javascript - Possible to fade out div border?

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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...