TweenMax動畫不能正常工作與常見的Java腳本文件

Question

例如，

主頁

<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動畫並繼續使用其他動畫。

Answer 1

我似乎無法重現該問題。你使用的是最新版本的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); 

使用最後一個參數來控制交錯/間距。

再一次，確保你已經得到了latest version，並且你正在CSSPlugin和TweenLite加載到該內頁。