在加载介绍之前隐藏内容

Question

我想在加载页面内容前介绍隐藏并在加载简介后显示

$(document).ready(function() {
    $('#content').removeClass('fullwidth');     
    $('#content').removeClass('fullwidth').delay(10).queue(function(next){
        $(this).addClass('fullwidth');
        next();
    });
    return false;
});

http://jsfiddle.net/19r5L0x7/2/

Answer 1

尝试这项工作：

＆＃13;

＆＃13;

$(document).ready(function() {
	$('#content').removeClass('fullwidth');	    
		//$('body').load(function() {
			$('#content').removeClass('fullwidth').delay(50).queue(function(next){
				$(this).addClass('fullwidth');
		        next();
          
		    });
    $(".fullwidth").width(100);
   
 var intervalId = setInterval(function(){
     var w = $(".fullwidth .expand").width() / $('.fullwidth .expand').parent().width() * 100;
if(w==100)
{
    clearInterval(intervalId);
    $(".load").fadeOut("slow");
    alert("done");
    //your show content code
}
 }, 0);
		    return false;
		});
//});

＆＃13;

body {
	background: #161616 url(pattern_40.gif) top left repeat;
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

#content { 
	width:100%; 
	height:5px; 
	margin:50px auto; 
	background:#000;
}

.fullwidth .expand { 
	width:100%; 
	height:1px; 
	margin:2px 0; 
	background:#2187e7; 
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation:fullexpand 10s ease-out;
	-webkit-animation:fullexpand 10s ease-out;
}

@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}
@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}

/* Loader Bar */

@-moz-keyframes fill {
	0%{ opacity:0; }
	100%{ opacity:1; }	
}

@-webkit-keyframes fill {
	0%{ opacity:0; }
	100%{ opacity:1; }	
}

.trigger, .triggerFull, .triggerBar {
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: lowercase;
	text-align: center;
	color: #fff;
	padding: 10px;
	border-radius: 3px;
	display: block;
	margin: 0 auto;
	width: 140px;
}
		
.trigger:hover, .triggerFull:hover, .triggerBar:hover {
	background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
	background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load">
<div id="content">
<span class="expand"></span>
</div>

＆＃13;

＆＃13;

＆＃13;