JavaScript Forum

**soon** · 06-05-2008, 06:25 PM

Hi

I'd like to fade in a div using javascript, some seconds after rest of page has loaded.

This code is a simple fade-in:

HTML Code:

<style>logo{filter:alpha(opacity=0);opacity:0}</style>
<script>
function Logo(){var fade=0,logo=document.getElementById("logo").style,ms=(logo.opacity==0)?0:1,pace=setInterval(Fade,20);function Fade(){if(fade<100){fade+=1;if(ms)logo.filter="alpha(opacity="+fade+")";else logo.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=Logo;
</script>
<body><div id="logo">CONTENT</div></body>

This works in IE (if you specify width of div) and FF. However, it did for somereason give an alert in IE7.

Is there any way I can apply timeout to it so the div only fades in after,say, 10 seconds? I have tried,but without success. I can slow the fade-in effects, but that's not what I would like to happen. What i am hoping for is, say, 10 seconds of nothing, then a fade-in over 1 second.

I don't want to go to the extent of the rather long scripts in Scriptaculous. I did find another nice-looking script at
http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html

but again, though I can change the speed of fade-in, I can't achieve a timeout to make it start late.

Any ideas please?

Many thanks

Tony

**wayfarer07** · 06-05-2008, 08:11 PM

What you're looking for is the setTimeout() function.
Here is a quick tutorial about it: http://www.w3schools.com/js/js_timing.asp

**nyef** · 10:22 PM

Drop the onload line and change your body tag to this:

Code:

<body onload="window.setTimeout('Logo()',10000);">

**soon** · 06-06-2008, 07:33 AM

Thanks folks, that's great and got it working now.

Best wishes

tony