如何保存原始 div position() 以供以后使用？答案

【问题标题】：How to save original div position() for later usage?如何保存原始 div position() 以供以后使用？
【发布时间】：2013-12-04 20:45:08
【问题描述】：

我目前正在使用 GSAP JS 库运行动画序列。

在运行第一个动画实例后，我运行了一个onComplete 函数，将当前的position() 保存为#myDiv

然后我尝试在动画的最后一个实例中使用 coordX 值，但它只是显示为：invalid left tween value: undefined

有什么想法吗？

var coordX;

function regPosition() {
    coordX = $("#mydiv").position().left;
}

function animationStart() {
    //Initiate animation with onComplete
    tl.to("#mydiv", 0.5, {borderRadius:"50%", width: "35%", onComplete: regPosition})

    //Move #myDiv to another position than registered    
    .to("#mydiv", 0.5, {left: 1000})

    //try to use the original position stored in "coordX"
    .fromTo("#mydiv", 1.5, {left:-800}, {left:coordX});
}
animationStart();

【问题讨论】：

标签： javascript jquery gsap

【解决方案1】：

coordX 的值直到在第一个 .to 完成后实际调用 onComplete 时才设置。在此之前，该值为undefined。

所以问题是在定义时间，coordX 的值是undefined，这就是您分配给left 的值。因此，当评估 .to 时，它会看到 undefined 值。

也许更好的方法是在onComplete内启动反向动画：

function animationStart() {
    tl.to("#mydiv", 0.5, {
        borderRadius:"50%", 
        width: "35%", 
        onComplete: function() {
            var coordX = regPosition();
            tl.to("#mydiv", 0.5, {left: 1000})
              .fromTo("#mydiv", 1.5, {left:-800}, {left: coordX});
        }
    })
}

【讨论】：

@IliaRostovtsev 谢谢 :)
啊，是的，Vivin 的好主意——这会让它工作得很好，感谢您的大力贡献！

【解决方案2】：

您的代码在时间方面存在一些逻辑问题。完成每个步骤都需要一些时间，并且在您完成所有步骤之前不会调用您的 onComplete 函数。不要使用onComplete 回调，只需在启动动画之前保存您的coordX 并在完成后使用它。

【讨论】：

【解决方案3】：

创建一个变量，保存位置介绍，稍后使用.. 我更喜欢 .offset()...

【讨论】：

如果这个答案附有一个显示如何做到这一点的代码片段会更有帮助