fade in div following showDiv() setTimeout
Really quick question - (I hope!)
I have a div that doesnt display until the rest of the page has loaded using:
<script>
function showDiv(){
var obj = document.getElementById('test');
obj.style.display = 'block';
}
</script>
in the head of my html, and the following code in the body:
<body onLoad="setTimeout('setTimeout(showDiv()', 1000);">
<div id="test" style="display:none;">
While the div loads after a set time correctly, I was wondering if there was a way to fade this div in after the given "Timeout", using something like:
<script type="text/javascript">
$(function(){ // $(document).ready shorthand
$('#test').hide().fadeIn(1500);
});
</script>
for example? At the moment, the div suddenly appears, although I am hoping to get it to fade in somehow. I have tried to merge these two js functions, but t开发者_如何学JAVAo this end unsuccessfully. Any help or advice much appreciated!
$(function(){
$('#test').hide();
setTimeout(function(){
$('#test').fadeIn('slow');
},1000);
});
$('#test').hide().delay(1500).fadeIn('slow');
JsFiddle DEMO
jQuery's .delay()
You should use the load event in jquery, like so:
$(window).load(function() {
$('#test').fadeIn('slow');
});
See: http://api.jquery.com/load-event/
<body onLoad="setTimeout('setTimeout(showDiv()', 1000);">is not cool in jquery land. :p
See also: http://api.jquery.com/ready/
加载中,请稍侯......
精彩评论