<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Opacity Test</title>
<link rel="shortcut icon" href="./images/arch-icon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
/*<![CDATA[*/
var showInterval;
var opacityValue = 0;
function showRow() {
//store a reference to this interval so we can stop it later
showInterval = setInterval("showRowFunction()", 50);
}
function showRowFunction() {
var obj = document.getElementById("tradvanced");
//if the div is not fully shown, we increase the opacity in 10% increments
if (opacityValue < 100) {
opacityValue += 10;
obj.style.opacity = (opacityValue / 100);
obj.style.MozOpacity = (opacityValue / 100);
obj.style.KhtmlOpacity = (opacityValue / 100);
obj.style.filter = "alpha(opacity=" + opacityValue + ")";
}
//if the div is fully shown we clear the interval
else {
clearInterval(showInterval);
}
}
/*]]>*/
</script>
<style type="text/css">
* {
border:0px;
margin:0px;
padding:0px;
}
tr#tradvanced {
opacity: 0.0;
-moz-opacity: 0.0;
-khtml-opacity: 0.0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<input type="button" value="Fade In" onclick="showRow(document.getElementById('tradvanced'))" />
<table>
<tr>
<td>(0, 0)</td><td>(0, 1)</td><td>(0, 2)</td><td>(0, 3)</td>
</tr>
<tr id="tradvanced">
<td>(1, 0)</td><td>(1, 1)</td><td>(1, 2)</td><td>(1, 3)</td>
</tr>
</table>
</body>
</html>
