Can someone take a look at my code: http://jsfiddle.net/7y9Gp/2/
I've been struggling with trying to fade in and out text or images, but for some reason, my canvas object refuses to cooperate. I've tried swapping the position of the canvas with the text in the code, but still no luck. Could anyone provide guidance on how to properly fade in a canvas object?
HTML:
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').delay(1000).fadeIn(2000).delay(2500);
$('#picTwo').delay(500).fadeIn(2500).delay(2000);
$('#picThree').delay(4000).fadeIn(2500).delay(2000);
});
</script>
</head>
<body>
<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle"><font size="200" id="picOne" color="black">SOME TEXT</font></td>
</tr>
<tr><td align="center" valign="middle">
<script type="text/javascript" src="http://hakim.se/experiments/html5/trail/01/js/three.js"></script>
<script type="text/javascript" src="http://hakim.se/experiments/html5/trail/01/js/trail.js"></script>
<div id="picTwo">
<canvas width="640" height="480" id="my-image"></canvas>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS:
#picOne, #picTwo {
position:relative;
display: none;
float:center;
top: 280px;
left: 0px;
z-index: 1;
}
#pics {
}
#my-image {
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}