Question

For Instance，

首页

<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文件吗？你可以发一个代码表或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。

TweenMax动画不适用于具有常见java脚本文件的多个页面

1 个答案: