TweenLite无法执行动画。

Question

我正在尝试使用GreenSocks TweenLite for Javascript做一个简单的top-margin动画。我已经多次使用过该库，但是这一次它不起作用了。注意：“onComplete”正在触发，但无论我使用什么元素，我都无法对HTML元素上的任何CSS属性进行动画处理。

HTML

<div id="GS_PipelineHeadline h2"></div>

JavaScript

TweenLite.to("#GS_PipelineHeadline h2", 0.5, 
{ 
    "margin-top": 0, 
    ease: "Back.easeOut", 
    onComplete: function () 
    { 
        console.log("Crap"); 
    } 
});

这里是我创建的一个非常快速的JSFiddle，包括所有的CSS、JS和HTML代码。 http://jsfiddle.net/mBPug/

如果有任何想法，我将不胜感激！

- dygfloyd

---

如果您制作一个 jsfiddle 来演示您遇到的问题，可能会有所帮助。 - J. Holmes

好的，谢谢提醒。我刚刚更新了我的帖子。 - dygfloyd

Answer 1

以下是需要注意的几点：

• 向你的代码片段添加CSS插件
• "margin-top"属性用处不大，请改用top属性

.

TweenLite.to("#GS_PipelineHeadline", 0.5, {
    top: 0,
    ease: Back.easeOut,
    onComplete: function () {
        console.log("Crap");
    }
});

http://jsfiddle.net/mBPug/4/

- Tim Vermaelen

---

不，这并没有达到我想要的效果。我想要做的是显示h2和h3。我在JS fiddle中调整了一些东西来展示我想要实现的效果。如果我使用JQuery animate，它可以工作。如果唯一的问题是CSS插件，我现在可能能够让它工作。我会试一试。 - dygfloyd

由于我的答案是基于您的原始问题，我相信这个问题已经解决了。但是，如果您仍然在动画本身方面遇到问题，您应该开一个新的问题。 - Tim Vermaelen

嗨，Tim- 看起来只是 CSS 插件的问题。我以前从未包含过它，也没有遇到过问题。我正在为一个旧网站创建一些东西，所以我试图尽量减少插件和新的 JS 文件的数量。但是，当我将它添加到网站上时，它立即弹出并开始工作。感谢您的帮助。 - dygfloyd