How to Make the Curtain Effect on Page Load Using Jquery

Using jquery, we can make the curtain effect while reloading the page. Here is the below code to make curtain effect.

HTML

<div class="animate-box">
    <div class="left-part"></div>
    <div class="right-part"></div>
</div>

CSS

.animate-box{ position:fixed; top:0px; left:0px; right:0px; bottom:0px; z-index:999;}
.animate-box .left-part{ background:#c1272d; width:50%; height:100%; transition:0.5s; float:left;}
.animate-box .right-part{ background:#c1272d; width:50%; height:100%; transition:0.5s; float:right; }

Jquery

$(document).ready(function(){
	$(".left-part").animate({width:"0px"});
	$(".right-part").animate({width:"0px"});
	
	setTimeout(
	  function() 
	  {
		$(".animate-box").hide();
	  }, 2000);
})