blocks|key|2434915|text|您需要为此使用jQuery+UI+(彩色动画)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2434916|$(".confession").animate({
+++borderLeftColor:+"white",
+++borderTopColor:+"white",
+++borderRightColor:+"white",
+++borderBottomColor:+"white",
},+3000);|code-block|syntax|javascript|2434917|(它不适用于borderColor，至于“透明的”它还是会变成白色的)|2434918|http://jsfiddle.net/Jacek_FH/kxCht/3/|offset|length|2434919|类似的插件(相同？)能力：|2434920|http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations|2434921|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|11|0|0|0|0|1U|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$K|17|L|18|1|19]]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|J]]|X|$5|T|U|V|A|$W|P]]]]

You need to use jQuery UI for that (color animation):

<pre><code>$(".confession").animate({
 borderLeftColor: "white",
 borderTopColor: "white",
 borderRightColor: "white",
 borderBottomColor: "white",
}, 3000);
</code></pre>

(it's not working with borderColor and as for "transparent" it fades to white anyway)

<a href="http://jsfiddle.net/Jacek_FH/kxCht/3/">http://jsfiddle.net/Jacek_FH/kxCht/3/</a>

plugin with the similar (same?) capability:

<a href="http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations">http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations</a>

blocks|key|703473|text|以下解决方案应符合您发布的所有标准：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|703474|等待5000毫秒(5秒)，然后动画从边框中淡出，持续500毫秒(.5秒)。|703475|$(".confession").delay(5000).animate({borderWidth:+"0"},+500);|code-block|syntax|javascript|703476|工作示例：http://jsfiddle.net/ECRLW/|offset|length|703477|由于上面的解决方案似乎无法在某些浏览器中动画化borderWidth淡出，我知道如何用jQuery实现您想要的唯一方法是使用setTimeout()：|703478|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);|703479|工作示例：http://jsfiddle.net/mmfMG/|703480|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ECRLW/|1|http://jsfiddle.net/mmfMG/^0|0|0|0|5|Q|0|0|0|0|5|Q|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$K|1C|L|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

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

<pre><code>$(".confession").delay(5000).animate({borderWidth: "0"}, 500);
</code></pre>

Working example: <a href="http://jsfiddle.net/ECRLW/" rel="nofollow">http://jsfiddle.net/ECRLW/</a>

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():

<pre><code>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);
</code></pre>

Working example: <a href="http://jsfiddle.net/mmfMG/" rel="nofollow">http://jsfiddle.net/mmfMG/</a>

blocks|key|2434986|text|恐怕没有一种干净的、100%25的工作方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2434987|background.|2434988|You+|unordered-list-item|2434989|你可以动画边框宽度，但这不会“褪色”。|2434990|你可以动画边框颜色，但这将需要在jQuery顶部增加一个额外的库，而且如果你改变了jQuery，它就会中断，你可以用一个小空间在对方上面放置2个div来伪造边框，然后淡出外部的一个，但这不是真正的边框，如果你想要一个dashed或dotted边框，就不会那么简单了。|offset|length|style|CODE|2434991|2434992|2434993|如果您不打算拥有比简单的实心边框更花哨的东西，我建议使用jQuery生成2+div解决方案，然后淡出外部(边框)div。就像乔伊在我上面的回答。|2434994|entityMap^0|0|0|0|0|30|6|37|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|Y|8|@$K|Z|L|10|M|N]|$K|11|L|12|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

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

<ul>
<li>You could animate the border-width, but that won't be "fading out".</li>
<li>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.</li>
<li>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 <code>dashed</code> or <code>dotted</code> border, it won't be that simple.</li>
</ul>

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.

blocks|key|2414703|text|我更喜欢我的方式..。>.>不需要插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2414704|http://jsfiddle.net/MJD5B/2|offset|length|2414705|<div+class="confession"+style="margin:3px;position:relative">
++++text
++++<div+class="fakeBorder"></div>
</div>|code-block|syntax|javascript|2414706|.fakeBorder
{
++++position:absolute;
++++height:100%25;
++++width:100%25;
++++left:0px;
++++top:0px;
++++border:3px+solid+#DDD;
++++margin:-3px;
}|2414707|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

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

<a href="http://jsfiddle.net/MJD5B/2" rel="noreferrer">http://jsfiddle.net/MJD5B/2</a>

<pre><code>&lt;div class="confession" style="margin:3px;position:relative"&gt;
 text
 &lt;div class="fakeBorder"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

 

<pre><code>.fakeBorder
{
 position:absolute;
 height:100%;
 width:100%;
 left:0px;
 top:0px;
 border:3px solid #DDD;
 margin:-3px;
}
</code></pre>

blocks|key|2414735|text|一个真正的淡出动画需要我们使用alpha通道。AFAIK+jQuery+UI对rgba()的使用非常错误，因此我们可以使用step属性来更改边框的不透明度，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2414736|setTimeout(function(){

++++var+div+=+$('.confession');
++++$({alpha:1}).animate({alpha:0},+{
++++++++duration:+1000,
++++++++step:+function(){
++++++++++++div.css('border-color','rgba(0,0,0,'%2Bthis.alpha%2B')');
++++++++}
++++});

},+5000);|code-block|syntax|javascript|2414737|我使用了黑色边框，这样您就可以注意到效果，但是您可以将其更改为您想要的任何颜色，例如rgba(221,221,221,'%2Bthis.alpha%2B')');+for+#DDD。|2414738|工作示例：http://jsfiddle.net/victmo/2Xazx/|2414739|干杯!|2414740|顺便说一句，这种方法不需要插件.|2414741|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/victmo/2Xazx/^0|13|6|1P|4|0|0|16|Z|2A|4|0|5|X|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|O|3|P|5|6|7|1F|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1G|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

A real fade out animation would require us to use the alpha channel.
AFAIK jQuery UI's use of <code>rgba()</code> is very buggy, so we can use the <code>step</code> property to change the opacity of the border like this:

<pre><code>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);
</code></pre>

I used a black border so you can notice the effect, but you can change it to whatever color you want, for example <code>rgba(221,221,221,'+this.alpha+')');</code> for <code>#DDD</code>

Working example: <a href="http://jsfiddle.net/victmo/2Xazx/" rel="noreferrer">http://jsfiddle.net/victmo/2Xazx/</a>

Cheers!

BTW, no plugins needed for this approach...

I know you can fade out a <code>&lt;div&gt;</code> with jQuery, but I was wondering if it's possible to fade out a border for a <code>&lt;div&gt;</code>?

So I've got my <code>&lt;div&gt;</code>:

<pre><code>&lt;div class="confession" style="border:3px solid #DDD;"&gt;
&lt;/div&gt;
</code></pre>

And I'd just like to some how make that border fade out after 5 seconds.

<hr>

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: <a href="http://caniuse.com/#search=transition" rel="nofollow">http://caniuse.com/#search=transition</a>

example

<pre><code>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;
}
</code></pre>

Possible to fade out div border?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道您可以用jQuery淡出一个jQuery，但我想知道是否有可能使<div>的边框淡出所以我拿到了我的<div><div class="confession" style="border:3px solid #DDD;"></div>我只想知道怎样让边界在5秒后消失。更新任何想要这样做的人都可以通过CSS3转换来完...

问有可能淡出边界吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有可能淡出边界吗？EN