jQuery, Анимационный Вверх
У меня есть проблема, где у меня есть отделение, которое расположено absoutely, и я хочу анимировать его от страницы вверх (я анимирую человека, спрыгивающего из экрана).
Однако мне нужен элемент, чтобы быть нижней частью: 0, но когда я хочу, чтобы анимация закончилась, я хочу, чтобы изображение имело вершину:-600px.
Когда я пишу
$("#jumper").animate({
top: "-600px"
}, 2000, 'easeInBack' );
это устанавливает главную вершину на 0 и затем запускает анимацию.
Возможно, существует способ получить ypos элемента и установить вершину с jQuery.css () на загрузке окна?
Что я должен сделать здесь?
2 ответа
Как насчет просто анимировать свойство bottom? Вы можете получить высоту документа, затем добавить к ней 600.
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' );
EDIT: Второй пример требует, чтобы bottom также был установлен в auto.
Вот пример с вашим кодом : http://www.jsfiddle.net/fJKah/
как мне кажется, работает как ожидалось. может быть, что-то еще мешает...