jQueryでNow Loadingからふわっと表示させたい

タイトルからしてふわっとしており恐縮でございます。。。

今回のお題

1. ページ読み込み中に「Now Loading...」画像を表示させる
2. 読み込み準備ができたら「Now Loading...」画像を非表示にする
3. その際、表示したいものを「パッ」と出すのではなく「ふわっ」と表示させる

ここで言う「ふわっと」はアニメーションを使ってopacityを徐々に上げて表示する意になります。
ということで、ふわっと感を大事にしてお届けします。

jQuery

今回はjQueryを使います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

html

result内に読み込んだ内容を表示させることにします。

<!-- now loading -->
<span class="loading">
    <img src="/img/loading.gif" alt="Now Loading..." />
</span>

<!-- 読み込んで表示したい内容 -->
<div class="result">
</div>

css

resultを透明化、loadingは画像の位置調整をそれぞれしております。

.result {
    opacity: 0;
}
.loading {
    left:50%;
    top:50%; 
    position: fixed;
}

script

loadしたタイミングで1500ミリ秒かけて透明度を下げていくようにします。

$(window).on('load', function() {
  $('.result').css({opacity: '0'}).animate({opacity: '1'}, 1500);
  $('.loading').hide();
});

以上、最後までふわふわしたまま終了です。