Ich führe derzeit eine Animationssequenz mit der GSAP JS-Bibliothek aus.

Nachdem ich die erste Instanz der Animation ausgeführt habe, führe ich eine onComplete - Funktion aus, die das aktuelle position() für #myDiv speichert.

Ich versuche dann, den Wert coordX in der letzten Instanz meiner Animation zu verwenden, er wird jedoch nur wie folgt angezeigt: ungültiger linker Tween-Wert: undefiniert

Irgendwelche Ideen?

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();
0
user1231561 5 Dez. 2013 im 00:45

3 Antworten

Beste Antwort

Der Wert von coordX wird erst festgelegt, wenn onComplete nach Abschluss des ersten .to tatsächlich aufgerufen wird. Bis dahin ist der Wert undefined.

Das Problem ist also, dass zum Definitionszeitpunkt der Wert von coordX undefined ist und dies der Wert ist, den Sie left zuweisen. Wenn dieses .to ausgewertet wird, wird ein undefined Wert angezeigt.

Vielleicht ist es besser, die umgekehrte Animation in onComplete zu starten:

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});
        }
    })
}
2
Vivin Paliath 4 Dez. 2013 im 21:02

Ihr Code weist einige logische Probleme hinsichtlich des Timings auf. Es dauert einige Zeit, bis jeder Schritt ausgeführt ist, und Ihre onComplete -Funktion wird erst aufgerufen, wenn alle Schritte abgeschlossen sind. Verwenden Sie keinen onComplete Rückruf und speichern Sie einfach Ihr coordX, bevor Sie die Animation starten, und verwenden Sie sie, wenn sie fertig ist.

0
Mehran Hatami 4 Dez. 2013 im 21:12

Erstellen Sie eine Variable, speichern Sie die Position in dieser und verwenden Sie sie später. Ich bevorzuge .offset () ...

0
Eduardo Agustin Velardez 24 Juli 2014 im 21:25