1

これが私のコードです：http：//jsfiddle.net/7y9Gp/2/

何が悪いのかまだわかりません。テキストまたは画像（フェードアウトを含む）をフェードインできますが、キャンバスオブジェクトは何を試しても機能しません。どんな助けでもいただければ幸いです！キャンバスの場所を（コード内の）テキストで切り替えましたが、違います。キャンバスオブジェクトをフェードインする特定の方法はありますか？

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>

</ p>

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;
}​
4

1 に答える 1

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は効果がないため、動作することを示すためだけにfadeIn置き換えられます）fadeOut

したがって、基本的に唯一の問題は、オブジェクトを間違ったものにしようfadeInとしていることです。fadeOut

于 2012-12-21T11:09:17.687 に答える