淡出預加載器

Question

加載完成後，如何讓我的預加載器淡出？我試着添加transition: 1s ease;，但我想我忘記了一些東西。

HTML：

<div class="preloader"> 
     <div class="preloder-wrap"> 
     <div><p class="typewriter" style="font-size:12px;color:#000;position:absolute;top:5px;left:1%;">function onReady(callback) {</p><p class="typewriter2" style="font-size:12px;color:#000;position:absolute;top:25px;left:1%;">var intervalID = window.setInterval(checkReady, 1000);</p><p class="typewriter3" style="font-size:12px;color:#000;position:absolute;top:45px;left:1%;">}</p><p class="typewriter4" style="font-size:12px;color:#000;position:absolute;top:75px;left:1%;">function checkReady() {</p><p class="typewriter5" style="font-size:12px;color:#000;position:absolute;top:95px;left:1%;">if (document.getElementsByTagName('body')[0] !== undefined) {</p><p class="typewriter6" style="font-size:12px;color:#000;position:absolute;top:115px;left:1%;">window.clearInterval(intervalID);</p><p class="typewriter7" style="font-size:12px;color:#000;position:absolute;top:135px;left:1%;">}</p></div> 
      <div class="preloder-inner"> 
      <br><br> 
      <div class="box loading"></div> 
       <br><br><div id="fadeinvtx" style="color:#FFF; text-align:center;"><i>//loading%</i></div> 
      </div> 
     </div> 
    </div> 

CSS：

.preloader{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
    background: #000; 
    z-index: 9999; 
} 

.preloder-wrap{ 
    display: table-cell; 
    vertical-align: middle; 
} 

.preloder-inner { 
    width: 200px; 
    height: 100px; 
    margin: 0 auto; 
} 

感謝。

Answer 1

在你的JavaScript，當它已經完成加載，你可以使用使用jQuery的fadeOut功能：

$("preloader").fadeOut();