隱藏

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

各地嘗試這項工作：

$(document).ready(function() { 
 
\t $('#content').removeClass('fullwidth'); \t  
 
\t \t //$('body').load(function() { 
 
\t \t \t $('#content').removeClass('fullwidth').delay(50).queue(function(next){ 
 
\t \t \t \t $(this).addClass('fullwidth'); 
 
\t \t   next(); 
 
      
 
\t \t  }); 
 
    $(".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); 
 
\t \t  return false; 
 
\t \t }); 
 
//});

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

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

 
img {border: none;} 
 

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

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

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

 
/* Loader Bar */ 
 

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

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

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

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