javascript - 显示指定秒数的 css 组件

Question

你好，我正在写一个简单的弹出窗口，叫做 popup-box 我希望它只显示 10 秒，在此期间之后它将被隐藏，所以请问如何做

这是我的代码:

CSS 代码:

/* Styles for game over popup */
   #popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;     
text-shadow: 0px 1px 2px #fff;

color: #222;

position: absolute;   
width: 100%;
height: 100%;
top: 0;
left: 0;

background: rgba(0,0,0,.5);

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;          

-webkit-transition: all .5s ease-in;}

    #popup h1 {
font-weight: 400;}

    #popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);

border-radius: 10px;

position: relative;

-webkit-box-shadow: 0 5px 5px #333;

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

-webkit-transition: all .5s ease-in;
    }

    #popup-box small {
font-size: .6em;
    }
      /***** Styles to hide the popup box ******/
    #popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;     
       }
   #popup.hide #popup-box{
margin-top: -800px;
    }

HTML 代码:

        <section id="popup"  class="hide">

     <div id="popup-bg"></div>

     <div id="popup-box">
               Cards are laid out in a grid face down,
       and players take turns flipping pairs of cards over.
       On each turn, the player will first turn one card over, 
       then a second. If the two cards match, 
       the player scores one point,
       the two cards are removed from the game, 
       and the player gets another turn. 
       If they do not match, the cards are turned back over.


         </div>


   </section> 

提前谢谢你

Answer 1

例如，使用 jQuery可以通过以下方式完成:

$("#popup").fade​In(500, function​​​​​​​() {
    $(this).delay(10000).fadeOut(500)
})​;​

演示: http://jsfiddle.net/Q8xMk/