0

例えば、

ホームページ

<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

中ページ

<!--<div id="box1">Box 1</div> -->
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

JS: (ホームページと内部ページで共通の Javascript。)

new TimelineMax({repeat:0}).to($('#box1'), 0.3, {css:{top:0, alpha:1,rotation:360}})
new TimelineMax({repeat:0}).to($('#box2'), 0.3, {css:{top:0, alpha:1,rotation:360}})
new TimelineMax({repeat:0}).to($('#box3'), 0.3, {css:{top:0, alpha:1,rotation:360}})

上記のコードはホームページで正常に動作します..しかし、内側のページでは.. #box1 を削除/コメントすると、他の #box2 および #box3 アニメーションが機能しません。#box1 アニメーションを無視して別のアニメーションを続行するにはどうすればよいですか?

4

1 に答える 1

0

その問題を再現できないようです。GreenSock ファイルの最新バージョンを使用していますか? 問題を示す codepen または jsfiddle を投稿できますか?

また、コードを大幅に簡素化できます。

TweenLite.to("#box1, #box2, #box3", 0.3, {top:0, alpha:1, rotation:360});

あなたのコードは「間違った」ものではありませんでした - ただ冗長です。また、シーケンシングを行っていない場合は、実際に TimelineMax を使用する必要はありません (ただし、そのワークフローを好む場合はまったく問題ありません)。ただし、これらのアニメーションをシーケンス化するつもりなら、次のように TimelineMax の staggerTo() メソッドを使用して簡単に実行できます。

new TimelineMax().staggerTo(["#box1", "#box2", "#box3"], 0.3, {top:0, alpha:1, rotation:360}, 0.3);

その最後のパラメーターを使用して、ずらし/間隔を制御します。

繰り返しますが、最新バージョンを入手していることと、その内部ページに CSSPlugin と TweenLite をロードしていることを確認してください。

于 2013-07-19T23:43:58.973 に答える