可以淡出div边界？
我知道你可以用jQuery淡出
的边框？
所以我得到了我的
：
而且我想了解一下如何让这个边界在5秒后淡出。
更新
任何仍然想要这样做的人都可以使用CSS3过渡。
请务必在支持的浏览器function中查看它： 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; }
真正的淡出动画需要我们使用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+')'); 对于#DDD
工作示例： http ： //jsfiddle.net/victmo/2Xazx/
干杯!
顺便说一下，这种方法不需要插件……
您需要使用jQuery UI（颜色动画）：
$(".confession").animate({ borderLeftColor: "white", borderTopColor: "white", borderRightColor: "white", borderBottomColor: "white", }, 3000);
（它不能与borderColor一起使用，而“透明”则无论如何都会变为白色）
http://jsfiddle.net/Jacek_FH/kxCht/3/
具有相似（相同？）function的插件：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
我喜欢我的方式…>。>不需要插件。
text
.fakeBorder { position:absolute; height:100%; width:100%; left:0px; top:0px; border:3px solid #DDD; margin:-3px; }
我担心没有一个干净的100％工作方式。
- 你可以设置边框宽度的动画，但这不会“淡出”。
- 你可以设置边框颜色的动画，但这需要在jQuery之上增加一个额外的库，如果你改变背景它会破坏。
- 你可以用一个小空间将2个div放在彼此的顶部来伪造边框，然后淡出外边的那个，但这不是真正的边框，如果你想要一些奇特的东西，比如
dashed或dotted边框，它不会那么简单。
如果你不打算拥有比简单实心边框更精彩的东西，我建议使用jQuery生成2 divs解决方案，然后淡出外（边界）div。 就像乔伊在我上面的回答一样。
以下解决方案应符合您发布的所有条件：
等待5000毫秒（5秒），然后动画淡出边界，持续500毫秒（.5秒）。
$(".confession").delay(5000).animate({borderWidth: "0"}, 500);
工作示例： http ： //jsfiddle.net/ECRLW/
由于上述解决方案似乎无法使用某些浏览器为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);
工作示例： http ： //jsfiddle.net/mmfMG/