Как сохранить исходную позицию div () для последующего использования?

Question

Как сохранить исходную позицию div () для последующего использования?

0

В настоящее время я запускаю анимационную последовательность с библиотекой GSAP JS.

После запуска первого экземпляра анимации я запускаю функцию onComplete сохраняя текущую position() для #myDiv

Затем я пытаюсь использовать значение coordX в последнем экземпляре моей анимации, однако оно просто появляется как: недопустимое значение левого поворота : неопределено

Есть идеи?

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();

user1231561 04 дек. 2013, в 21:51

Источник

Теги:

javascript

jquery

greensock

3 ответа

0

Создайте переменную, сохраните позицию intro и используйте позже. Я предпочитаю.offset()...

Eduardo Agustin Velardez 24 июль 2014, в 19:39

2

Этот ответ был бы более полезным, если бы он сопровождался фрагментом кода, показывающим, как это сделать.
rink.attendant.6 24 июль 2014, в 21:39

0

У вашего кода есть некоторые логические проблемы относительно времени. для выполнения каждого шага требуется некоторое время, и функция onComplete не будет вызываться до тех пор, пока все ваши действия не будут выполнены. не onComplete обратный вызов пользователя, а просто сохраняйте coordX перед началом анимации и используйте ее, когда это будет сделано.

Mehran Hatami 04 дек. 2013, в 20:08

Ещё вопросы

Этот ответ был бы более полезным, если бы он сопровождался фрагментом кода, показывающим, как это сделать.

Vivin Paliath · Accepted Answer · 2013-12-04T19-10-00.000Z

Значение 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});
        }
    })
}

Взглянул на Регулу , это круто! Отличная работа!!
Ах, да, хорошая идея, Вивин - это заставит ее работать просто отлично, спасибо за помощь!