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
Post a Comment