Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
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:
function show()
{
var op=1/10
var t=100
while(t<=1000)
{
setTimeout("document.getElementById('image' ).style.opacity=op", t)
op=op+(1/10)
t=t+100
}
}
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.
1 Answer
- EmissaryLv 61 decade agoFavorite 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);
}
};
</script>
<style type="text/css">
/* START: opacity levels */
.opac00 {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
filter:alpha(opacity=0);
} .opac10 {
opacity:0.1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=10)";
filter:alpha(opacity=10);
} .opac20 {
opacity:0.2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
filter:alpha(opacity=20);
} .opac30 {
opacity:0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
filter:alpha(opacity=30);
} .opac40 {
opacity:0.4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter:alpha(opacity=40);
} .opac50 {
opacity:0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:alpha(opacity=50);
} .opac60 {
opacity:0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter:alpha(opacity=60);
} .opac70 {
opacity:0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
filter:alpha(opacity=70);
} .opac80 {
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
filter:alpha(opacity=80);
} .opac90 {
opacity:0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";
filter:alpha(opacity=90);
} .opac100 {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter:alpha(opacity=100);
}
/* END: opacity levels */
#test1, #test2 {
width: 100px; height: 100px;
background-color:#000000;
margin-right:20px;
}
</style>
</head>
<body>
<div class="opac100" id="test1"></div>
<div class="opac00" id="test2"></div>
<br/><br/>
<a href="javascript:void(0);" onclick="fadeOut('test1',10);">Fade Out</a>
<br/>
<a href="javascript:void(0);" onclick="fadeIn('test2',0);">Fade In</a>
</body>
</html>
Source(s): Web Developer
