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

Question

我目前正在使用GSAP JS庫運行動畫序列。

運行第一個動畫實例后，我運行一個onComplete函數，保存#myDiv的當前position()

然后我嘗試在動畫的最后一個實例中使用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

直到在第一個.to完成后實際調用onComplete ， coordX設置coordX的值。 在此之前，該值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（）...