利用JQuery寫出loading完成後執行開門效果

開始之前，我們來先看一下效果demo

首先在head中引入jquery

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

接著在前寫入

<code class="language-javascript"><script type="text/javascript">
$('body').after("<div class='spinner-wrap'><div class='leftside'/><div class='rightside'/><div class='spinner'><div class='bounce1'/><div class='bounce2'/><div class='bounce3'/></div></div>")
    //在body下新增div

</script>


<script type="text/javascript">

var loaded = false;//宣告一個laoded =false
function hide_loader() {
if (!loaded) { //true
    $('body').css('overflow', 'visible');
    $(".leftside").stop().css('width', '0px');//loading完成對.leftside執行
    $(".rightside").stop().css('width', '0px');//loading完成對.rightside執行
    $('.spinner').stop().css('top', '-1000px');
    $('.spinner-wrap').fadeOut(1000, function () {//fadeOut後接著在HTML裡面刪除這個div
        $(this).remove()
    });
    loaded = true
}
}
setTimeout(function () {
hide_loader()
},
10000);
$(window).load(function () {//loading時執行這個function
hide_loader()
});


</script>

接著再到CSS裡面寫入

<style>
.leftside {
position:absolute;
left:0;
width:50%;
height:100%;
background:#e74b3b;
-webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
/*左邊全屏 寬度50%*/
.rightside {
position:absolute;
right:0;
width:50%;
height:100%;
background:#e74b3b;
-webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
/*右邊全屏 寬度50%*/
</style>

會出現這種收起來的效果主要是因為寬度從50%到0px之前有一個過渡效果唷。

所以-webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;

＊這一段屬性是必要的唷