Question

我知道你可以用jQuery淡出<div>，但我想知道是否可以淡出<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;
}

Answer 1

你需要使用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

Answer 2

真正的淡出动画需要我们使用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/

干杯！

顺便说一下，这种方法不需要插件......

Answer 3

我更喜欢我的方式...＆gt;。＆gt;不需要插件。

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;
}

Answer 4

我担心没有一个干净的100％工作方式。

您可以设置边框宽度的动画，但这不会“淡出”。
你可以设置边框颜色的动画，但这需要在jQuery之上增加一个额外的库，如果你改变背景它会破坏。
你可以用一个小空间将2个div放在彼此的顶部来伪造边框，然后淡出外边的那个，但这不是一个真正的边框，如果你想要一些奇特的东西，比如{{ 1}}或dashed边框，它不会那么简单。

如果你没有计划比简单的实心边框更有趣，我建议使用jQuery生成2 divs解决方案，然后淡出外（边界）div。就像乔伊在我上面的回答一样。

Answer 5

以下解决方案应符合您发布的所有条件：

等待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/

可以淡出div边界？

5 个答案: