How to get my div to fade out with jQuery on page load?
Question
I'm brand new to jQuery (and javascript in general). I've been meaning to use it/learn it for some time, and nows the time.
So I'm going to use jQuery on this page to fade out the "under construction" warning at the top of the page on load. But I'm unfamiliar with any of the functions or selectors to use.
I found this basic article at jQuery which has a demo that seems to work perfect for what I'm doing, only it's set up to fade out on click.
What do I need to change to get it to fade out after a few seconds once the page has loaded, and can you point me where to look to find out more about those type of functions (specifically on jQuery's site, if you're familiar). And please don't say, "In the documentation." I'm a noob but not a dummy, thanks. I'm just trying to learn more about that particular area of the syntax responsible for functions for now (if that's what they're called).
6 answers
solution1
8 2010-08-03 00:55:18
New to jQuery 1.4 is the delay method. Using it for this purpose:
$("#myDiv").delay(3000).fadeOut("slow");
solution2
7 ACCPTED 2010-08-03 00:21:08
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#myDiv").fadeOut('slow');
}
solution3
2 2010-08-03 00:21:41
Hey, the site looks cool. This should do it for you.
$(document).ready(function() {
setTimeout(fade, 2000);
}
function fade(){
$("#tempwarning").fadeOut(1000);
}
solution4
2 2010-08-03 00:23:40
Here's a complete example.
Just paste this into an html file and save it.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 3000);
});
function fadeout(){
$('#tempwarning').fadeOut('slow', function() {
// Animation complete.
});
}
</script>
</head>
<body>
<div id="tempwarning">
<div class="wrap">
<span class="warning-icon">!</span>
<p>
Oops! Please pardon my appearance. I'm still <a href="http://graphicriver.net/item/under-construction-graphic/53758?ref=jglovier">under development</a>. Please visit often.
</p>
</div>
</div>
</body>
</html>
EDIT:
This line of code:
$(document).ready(function() { });
Waits for the page to load before executing anything inside it.
solution5
1 2010-08-03 00:22:26
$(document).ready(function(){
setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});
solution6
0 2019-08-28 03:16:28
<script>
$(document).ready(function(){
window.setTimeout('fadeout();', 1000);
});
function fadeout(){
$('.loader').fadeOut('fast', function() {
// Animation complete.
});
}
</script>
Perfect for a LoadingPage
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.