能否使div边框逐渐消失？

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

- Richard Hedges

Answer 1

你需要使用jQuery UI实现此功能（颜色动画）:

$(".confession").animate({
   borderLeftColor: "white",
   borderTopColor: "white",
   borderRightColor: "white",
   borderBottomColor: "white",
}, 3000);

(边框颜色 borderColor 不起作用，而 "transparent" 则会淡化为白色)

http://jsfiddle.net/Jacek_FH/kxCht/3/

具有类似（相同？）功能的插件：

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

- Jacek Kaniuk

---

如果他的背景不是白色的，那如果它是透明的呢？ - Madara's Ghost

@Jacek_FH，出于某种原因，我无法通过延迟使其正常工作（边框立即变为白色/透明）。你能否重现这个问题（http://jsfiddle.net/kxCht/）？（我正在使用Firefox 5。） - Frédéric Hamidi

这与持续时间无关 - jQueryUI仅单独处理所有4个边框。 - Jacek Kaniuk

即使如此，它仍然无法处理例如图像背景。这将导致在背景不同的情况下，它会渐变为白色。 - Madara's Ghost

（在Firefox上）对于你的JSFiddle链接，它会淡出，但然后变成白色。 - Richard Hedges

Answer 2

一个真正的淡出动画需要我们使用alpha通道。据我所知，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/

干杯！

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

- victmo

---

我查看了您提供的JSFiddle链接，但似乎没有起作用 :/ - Richard Hedges

我相信旧版本的IE无法处理rgba属性。你在哪个浏览器上测试过？ - victmo

我刚刚更新了示例，使边框在5秒后自动淡出，而不需要点击正方形。 - victmo

好的，我刚刚在IE9、FF4和Chrome13上再次测试了这个示例，它可以正常工作 :) - victmo

抱歉昨天没有回复 :) 我没上网。感谢你所做的一切，现在都可以正常工作了! :) - Richard Hedges

Answer 3

我更喜欢我的方式... >.> 无需插件。 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;
}

- Joseph Marikle

---

我的方法也是如此，只需在内部添加一个绝对定位的元素，并将其淡出 - 纯jQuery :) - jave.web

Answer 4

很抱歉，没有一种完美的方法可以做到这一点。

您可以通过动画效果来改变边框宽度，但这不会产生“淡出”的效果。

您可以通过动画效果来改变边框颜色，但这需要在jQuery之上额外使用库，并且如果更改了背景，它将会中断。

您可以通过将两个div放置在彼此上方并留有一小段空间来模拟边框，然后淡化外部的那个div，但这并不是真正的边框，如果您想要像虚线或点状边框这样的花哨效果，就不会那么简单。

如果您计划使用简单的实线边框而不是更花哨的东西，我建议使用jQuery生成两个div的解决方案，然后淡化外部（边框）div，就像Joey在我的回答之前所说的那样。

- Madara's Ghost

Answer 5

下面的解决方案应该符合您发布的所有标准：

等待5000毫秒（5秒），然后动画淡出边框，持续500毫秒（0.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/

- Robert

---

使用您的JSFiddle，在Safari中，边框只是突然出现...无论我设置持续时间多长，都没有淡入淡出。 - Sparky

这是唯一一个对我有效的，尽管像Sparky说的那样（但我使用的是Firefox），它只是消失了，没有淡出。 - Richard Hedges

是的，为了阐述这一点。边框消失了，但它不会淡化 :) - Richard Hedges

@Richard和RobB：新的示例在Safari中仍然无法工作...不会淡出也不会消失。 - Sparky