如何在页面加载一段时间后淡出 div 的边框和 bgcolour？

Question

我想在页面加载时显示此 div "abc"。那时假设背景颜色是黄色。和边框将是黑色的。但几秒钟后将只有文本。没有边框和背景色。

<script>
$(window).load(function(){
    setTimeout(function(){
        $('#abc').fadeIn();
        $('#abc').fadeOut();
    },1000);
});
</script>

<div id="abc"  style="background-color:#FFFF99; border:1px; border-style:solid; border-color:#000000;">
Hello, i want to stay, i don`t my borders and bg.
<div>

Answer 1

所以，这就是你想要的？ demo

    setTimeout(function(){
      $('#abc').fadeIn();
      $('#abc').removeAttr('style');
    },1000);

Answer 2

如果您想保持 'fade' 效果但不淡出 div 本身，这看起来对 CSS3 'transition' 属性很有用.

jQuery:

setTimeout(function(){
    $('#abc').fadeIn();
    $('#abc').addClass('noHighlight');
},1000);

CSS:

#abc {
   background-color:#FFFF99; 
   border:1px; 
   border-style:solid; 
   border-color:#000000;
   transition:all 1s;}

#abc.noHighlight {
   background:transparent;
   border-color:transparent;}

HTML:

<div id="abc">
     Hello, i want to stay, i don`t my borders and bg.
<div>

JSFiddle：https://jsfiddle.net/rh11wgw5/

如何在页面加载一段时间后淡出 div 的边框和 bgcolour？

How to fadeout borders and bgcolour of a div after some time of pageload?

css

jquery

onload

fadeout