无法使用 GSAP 定位对象答案

【问题标题】：Can't position objects with GSAP无法使用 GSAP 定位对象
【发布时间】：2014-04-02 10:23:56
【问题描述】：

我从他们的文档中获取了真正简单的示例，我重新调整了照片的大小和位置。重新调整大小的部分工作正常，但不会重新定位。这是我的代码：

<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
    #test { width: 100px; height: 100px; background-color: #f72; }
</style>

    <!--CDN link for the latest TweenMax-->
**<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>**
</head>

<body>
    **<div id="test"></div>
    <img id="photo" src="Putin.jpg">**

<script>
    **var photo = document.getElementById("photo"); 
    TweenLite.to(photo, 2.5, {width:100});  // this works
    TweenLite.to(photo, 4, {left:300});   // this does nothing

    var thing = document.getElementById('test');
    TweenLite.to(thing, 1, {left:200});   // this does nothing
    TweenLite.to(thing, 1, {top:100});    // this does nothing**
</script>

</body>

你可以在这里运行它：http://www.jimslounge.com/gsap_test/

【问题讨论】：

标签： javascript tween gsap

【解决方案1】：

更新：

我总是等到窗口加载完毕后再执行依赖于外部库的代码：

window.onload = function(){
    var photo = document.getElementById("photo"); 
    TweenMax.to(photo, 4, {x:300});
}

其次，您正在加载 TweenMax 库，因此您需要使用 TweenMax 而不是 TweenLite

第三，除了不确定是否需要在不为填充或边距设置动画时将块定义为绝对位置外，您绝对应该传递 x 而不是 left 属性

TweenMax.to(photo, 4, {x:300});

试一试，如果这有帮助，请告诉我

在此处查看一个工作示例： http://jsfiddle.net/Hitbox/QbyCU/1/

【讨论】：

感谢您的回答，但没有任何改变。
我刚刚更新了我的答案。另请参阅有效的 js fiddle 示例。
虽然 css 没有帮助，但我回去尝试了您关于绝对定位的建议，有效！！