Question

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

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

然后我尝试在动画的最后一个实例中使用coordX值，但它只是显示为：无效的左补间值：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();

Answer 1

在第一个coordX完成后实际调用onComplete之前，不会设置.to的值。在此之前，该值为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});
        }
    })
}

Answer 2

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

Answer 3

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

如何保存原始div位置（）以供以后使用？

3 个答案: