javascript 可以淡出div边框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7030575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to fade out div border?
提问by Richard Hedges
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>?
我知道您可以<div>使用 jQuery淡出 a ，但我想知道是否可以淡出 a 的边框<div>？
So I've got my <div>:
所以我有我的<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.
我只是想知道如何让边框在 5 秒后淡出。
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
任何仍然想要这样做的人都可以使用 CSS3 过渡来做到这一点。
请务必检查它是否在您支持的浏览器功能范围内：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;
}
采纳答案by victmo
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 stepproperty to change the opacity of the border like this:
真正的淡出动画需要我们使用 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);
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
我用了黑色边框，所以你可以看到效果，但可以将其更改为任何你想要的颜色，例如rgba(221,221,221,'+this.alpha+')');用于#DDD
Working example: http://jsfiddle.net/victmo/2Xazx/
工作示例：http: //jsfiddle.net/victmo/2Xazx/
Cheers!
干杯!
BTW, no plugins needed for this approach...
顺便说一句，这种方法不需要插件......
回答by Jacek Kaniuk
You need to use jQuery UI for that (color animation):
您需要为此使用 jQuery UI（彩色动画）：
$(".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)
（它不适用于 borderColor，至于“透明”，它无论如何都会淡化为白色）
http://jsfiddle.net/Jacek_FH/kxCht/3/
http://jsfiddle.net/Jacek_FH/kxCht/3/
plugin with the similar (same?) capability:
具有类似（相同？）功能的插件：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
回答by Joseph Marikle
i like my way more... >.> No plugins needed.
我更喜欢我的方式... >.> 不需要插件。
<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;
}
回答by Madara's Ghost
I'm afraid there isn't a clean 100% working way of doing so.
恐怕没有一种干净的 100% 工作方式可以做到这一点。
- 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
dashedordottedborder, it won't be that simple.
- 您可以为边框宽度设置动画，但这不会“淡出”。
- 您可以为边框颜色设置动画，但这需要在 jQuery 之上使用额外的库，而且如果您更改背景，它会中断。
- 您可以通过将 2 个 div 放在彼此顶部并留出一个小空间来伪造边框，然后淡出外面的一个，但这并不是真正的边框，如果您想要一些花哨的东西，例如 a
dashed或dotted边框，它会赢不要那么简单。
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.
如果您不打算拥有比简单的实心边框更花哨的东西，我建议使用 jQuery 生成 2 div 解决方案，然后淡出外部（边框）div。就像乔伊在我上面的回答一样。
回答by RobB
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).
等待 5000 毫秒（5 秒），然后动画淡出边框，持续 500 毫秒（0.5 秒）。
$(".confession").delay(5000).animate({borderWidth: "0"}, 500);
Working example: http://jsfiddle.net/ECRLW/
工作示例：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():
由于上述解决方案似乎无法在某些浏览器中为 borderWidth 设置动画，因此我知道如何使用 jQuery 完成您想要的操作的唯一其他方法是使用 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/
工作示例：http: //jsfiddle.net/mmfMG/
