jQuery Animate Upwards

Question

У меня проблема с div, который позиционируется абсолютно, и я хочу анимировать его со страницы вверх (я оживляю человека, спрыгивающего с экрана).

Однако мне нужно, чтобы элемент был bottom: 0, но когда я хочу, чтобы анимация завершилась, я хочу, чтобы изображение имело top: -600px.

Когда я пишу

$("#jumper").animate({ 
    top: "-600px"
}, 2000, 'easeInBack' );   

устанавливает top top на 0, а затем запускает анимацию.

Возможно, есть способ получить ypos элемента и установить top с помощью jQuery.css () при загрузке окна?

Что мне здесь делать?

Answer 1

Как насчет анимации свойства bottom? Вы можете получить высоту документа, а затем добавить 600 к нему.

http://jsfiddle.net/kavY4/

var height = $(document).height();

$("#jumper").animate({ 
    bottom: height + 600
}, 2000, 'easeInBack' ); ​

В противном случае вы сталкиваетесь с конкретными проблемами браузера, где top рассчитывается как auto, и анимация пытается начать с этой позиции (которая, как я полагаю, заканчивается 0).

Чтобы это работало, вам нужно получить верхнюю позицию #jumper и вручную установить для свойства top это значение, прежде чем анимировать.

var top = $('#jumper').offset().top;

$("#jumper").css({top:top, bottom:'auto'})
.animate({ 
    top: -600
}, 2000, 'easeInBack' ); 

РЕДАКТИРОВАНИЕ: Во втором примере требуется, чтобы bottom также был установлен на auto.

http://jsfiddle.net/kavY4/1/

Answer 2

Вот пример с вашим кодом: http://www.jsfiddle.net/fJKah/

выглядит так, как я ожидал. возможно что-то еще мешает ..