In javascript, how can i use a variable inside document.getElementById to cause an opacity effect?
I am still new to javascript so this might sound a little weird. Anyways, for the last few hours, I have been trying to make a rather nice image effect by increasing the opacity of the image steadily till it reaches its maximum at one second. I tried:
but when i ran the function, the image remained at its original opacity, at 0. I played around with it for hours yet it would never work. I need a way to make it work without using the foolish way by simply writing a thousand timeouts after each other and i need a way that will make it short and flexible so that i can easily change the rate at which the opacity increases and such . Any help would be greatly appreciated.
Emissary2010-10-25T03:26:27Z
Favorite Answer
This is a simplified example of part of a script I wrote a while ago to do this. I found it much easier to set up predetermined CSS classes as there are a few lines of code you should use to ensure that the script is cross-browser compatible. It is also my understanding that CSS can apply the changes quicker than Javascript can so in large files it should also appear smoother.
I have a funny feeling when i copy the code into yahoo answers it will be truncated so I've put my code up on paste-it too: http://paste-it.net/public/c25defc/
<html> <head> <title>Opacity Example</title>
<script type="text/javascript">
function fadeIn(id, o) { var e = document.getElementById(id); if(o>=0&&o<=10) { e.className = 'opac'+o+'0'; setTimeout(function(){fadeIn(id, o+1)},30); } };
function fadeOut(id, o) { var e = document.getElementById(id); if(o>=0&&o<=10) { e.className = 'opac'+o+'0'; setTimeout(function(){fadeOut(id, o-1)},30); } };