这是我的代码:http://jsfiddle.net/7y9Gp/2/
我仍然不确定是什么问题。我可以淡入文本或图像(包括淡出),但无论我尝试什么,我的画布对象都不会做。任何帮助,将不胜感激!我甚至用文本(在代码中)切换了画布位置但是没有。是否有一种特殊方法可以淡化画布对象?
<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>
#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;
}
答案 0 :(得分:2)
演示:http://jsfiddle.net/7y9Gp/11/
您希望在div#picTwo
中找到一个画布,但是trail.js
或three.js
会创建自己的画布(或类似的东西 - 我看起来不那么深)。所以,如果你要替换:
$('#picTwo').delay(500).fadeIn(2500).delay(2000);
带
$('canvas').delay(500).fadeOut(2500).delay(2000);
它会正常工作(fadeIn
替换为fadeOut
只是为了表明它有效,因为默认情况下它是可见的,而fadeIn将无效)
所以,基本上唯一的问题是你试图fadeIn
/ fadeOut
错误的对象。