[英]How to save original div position() for later usage?
I'm currently running an animation sequence with the GSAP JS library. 我目前正在使用GSAP JS库运行动画序列。
After running the first instance of the animation, I run an onComplete
function saving the current position()
for #myDiv
运行第一个动画实例后,我运行一个
onComplete
函数,保存#myDiv
的当前position()
I then try to use the coordX
value in the last instance of my animation, however it just turns up as: invalid left tween value: undefined 然后我尝试在动画的最后一个实例中使用
coordX
值,但它只是变为: 无效的左补间值:undefined
Any ideas? 有任何想法吗?
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();
The value of coordX
isn't set until onComplete
is actually called after the first .to
completes. 直到在第一个
.to
完成后实际调用onComplete
, coordX
设置coordX
的值。 Until then the value is undefined
. 在此之前,该值
undefined
。
So the problem is that at definition time , the value of coordX
is undefined
, and that is the value you are assigning to left
. 所以问题是在定义时 ,
coordX
的值是undefined
,这是你要分配给left
的值。 So when that .to
is evaluated, it sees an undefined
value. 因此,当评估该
.to
时,它会看到undefined
值。
Perhaps a better way is to initiate the reverse animation within onComplete
: 也许更好的方法是在
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});
}
})
}
Your code has some logical issues regarding timing. 您的代码在时序方面存在一些逻辑问题。 it takes some time to do the each step and your
onComplete
function won't be called until your steps all is done. 执行每个步骤需要一些时间,在完成所有步骤之前,不会调用
onComplete
函数。 do not user onComplete
callback and just save your coordX
before initiating the animation and use it when it's done. 不要使用
onComplete
回调,只需在启动动画之前保存coordX
,并在完成后使用它。
创建一个变量,保存位置介绍并稍后使用..我更喜欢.offset()...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.