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

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

首先在head中引入jquery

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

接著在</body>前寫入

<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;

＊這一段屬性是必要的唷