預加載器隱藏效果

Question

我正在嘗試向我的頁面添加預加載器功能。完成。但是預加載器像下圖一樣淡出。

這是我的代碼..

$(document).ready(function() { 
 
    //Preloader 
 
    $(window).load(function() { 
 
    preloaderFadeOutTime = 5000; 
 
    function hidePreloader() { 
 
    var preloader = $('.spinner-wrapper'); 
 
    preloader.fadeOut(preloaderFadeOutTime); 
 
    } 
 
    hidePreloader(); 
 
    }); 
 
    });

.spinner-wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #000; 
 
    z-index: 999999; 
 
} 
 

 
.spinner.windcatcher { 
 
    margin: 0 auto; 
 
    top: 46%; 
 
    left: 48%; 
 
    border: 0; 
 
    position: absolute; 
 
    width: 4em; 
 
    perspective: 50em; 
 
    -webkit-animation: rotate 4s linear infinite; 
 
    animation: rotate 4s linear infinite; 
 
} 
 

 
.spinner.windcatcher .blade { 
 
    height: 0.5em; 
 
    background: red; 
 
    margin-bottom: 0.1em; 
 
    -webkit-animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite; 
 
    animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite; 
 
} 
 

 
.spinner.windcatcher .blade:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } 
 
.spinner.windcatcher .blade:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } 
 
.spinner.windcatcher .blade:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } 
 
.spinner.windcatcher .blade:nth-child(4) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } 
 
.spinner.windcatcher .blade:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; } 
 
.spinner.windcatcher .blade:nth-child(6) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } 
 
.spinner.windcatcher .blade:nth-child(7) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } 
 
.spinner.windcatcher .blade:nth-child(8) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }

<div class="spinner-wrapper"> 
 
    <div class="controls"></div> 
 
    <div class="spinner windcatcher" id="windcatcher"> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    <div class="blade"></div> 
 
    </div> 
 
</div>

在上面的圖片中，預載是淡出從右到左。但我需要它不應該從右到左淡出。它應該從當前位置消失。請幫忙。

謝謝。

Answer 1

嘗試.fadeOut而不是.hide方法。

JSFiddle sample