javascript - How to fade a message when HTML page loads + Bootstrap -


i want when index page load in browser current div fade out after 3 seconds. when div hide main content of page (menu,images,etc) show. use bootstrap css in page

i stack in following problem. problem js function isn't working.

here body of html page far:

<body> <div id="fade">         <div id="box">           <blockquote class="blockquote-reverse">                 <p>blah blah</p>                 <footer>project manager of <cite title="source title">some project</cite></footer>         </blockquote>        </div>      </div>  <!-- blah blah here comes rest of site --> </body> 

here css file:

#box {     font-family: 'playfair display';     position: absolute;     top: 50%;     left: 50%;     transform: translatex(-50%) translatey(-50%); }  #fade {     height:100vh;     background-color: black; } 

and here js file:

$(document).ready(function(){     $('#box').delay(300).fadeout(300); }); 

note use bootstrap (as said earlier).

use .load() instead of .ready(), because load wait until page loaded content, ready, when script ready.

$(window).load(function(){     // code }); 

and don't need delay.

here's living demo: http://jsfiddle.net/sox59a1a/


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -