可能淡出格边境？

问题描述

我知道你可以淡出＆LT; D​​IV＆gt;在jQuery的，但我想知道如果有可能淡出的边界 ＆LT; D​​IV＆GT;

所以，我有我的＆LT; D​​IV＆GT; ：

 ＆LT; D​​IV CLASS =自白的风格=边界：固体3PX #DDD;＆GT;
＆LT; / DIV＆GT;
 

和我只是想一些如何让这条边界5秒后淡出。

---

更新

还有人想这样做可以用CSS3过渡做到这一点。

只是一定要检查它是你支持的浏览器能力范围之内：

干杯！

BTW，没有必要采取这种做法的插件...

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

So I've got my <div>:

<div class="confession" style="border:3px solid #DDD;">
</div>

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

---

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: http://caniuse.com/#search=transition

example

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

解决方案

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

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

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

Working example: http://jsfiddle.net/victmo/2Xazx/

Cheers!

BTW, no plugins needed for this approach...

这篇关于可能淡出格边境？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！