有可能淡出边界吗？
有可能淡出边界吗？
提问于 2011-08-11 17:54:54
我知道您可以用jQuery淡出一个jQuery，但我想知道是否有可能使<div>的边框淡出
所以我拿到了我的<div>
<div class="confession" style="border:3px solid #DDD;">
</div>我只想知道怎样让边界在5秒后消失。
更新
任何想要这样做的人都可以通过CSS3转换来完成这个任务。
只需确保检查它是否在您支持的浏览器能力范围内：http://caniuse.com/#search=transition
示例
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;
}回答 5
Stack Overflow用户
回答已采纳
发布于 2011-08-11 19:34:29
一个真正的淡出动画需要我们使用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);我使用了黑色边框，这样您就可以注意到效果，但是您可以将其更改为您想要的任何颜色，例如rgba(221,221,221,'+this.alpha+')'); for #DDD。
工作示例：http://jsfiddle.net/victmo/2Xazx/
干杯!
顺便说一句，这种方法不需要插件.
Stack Overflow用户
发布于 2011-08-11 17:59:26
您需要为此使用jQuery UI (彩色动画)：
$(".confession").animate({
borderLeftColor: "white",
borderTopColor: "white",
borderRightColor: "white",
borderBottomColor: "white",
}, 3000);(它不适用于borderColor，至于“透明的”它还是会变成白色的)
http://jsfiddle.net/Jacek_FH/kxCht/3/
类似的插件(相同？)能力：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
Stack Overflow用户
发布于 2011-08-11 18:16:17
我更喜欢我的方式..。>.>不需要插件。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7030575
复制相关文章
相似问题
腾讯云开发者
