Не удалось получить позицию Div после того, как анимировать

Question

Я пытаюсь оживить div по ссылке click к 3px в bottom, если позиция уже 30% и идет вверх, если это 3px.

$(document).ready(function() { 

    $('#picsClick').click(function() { 

     if ($('#mainLogo').position().bottom === '30%') { 
      $("#mainMenu").animate({ bottom: "3px" }, 1100); 
     } 
     else if (($('#mainLogo').position().bottom === '3px')) { 
      $("#mainMenu").animate({ bottom: "30%" }, 1100); 

     } 

    }); 
}); 

Как-то не работает, как я поставил MainMenu div позицию bottom30% и это положение absolute.
Спасибо.

Answer 1

Объект, возвращаемый положением(), содержит только свойства слева и сверху. Таким образом, нижнее и неисчерпаемое свойство, и поэтому ваш код не работает.

Для получения дополнительной информации см. jQuery documentation.

Answer 2

API положения jQuery дает координаты элемента. X и Y - для вас это означало бы верхнюю и левую. Вам нужно будет реорганизовать свою логику вокруг них. Даже после этого вы должны заметить, что возвращаемые значения - это числа - абсолютные значения, основанные на размерах элементов позиции w.r.t. Вы не можете ожидать процентов. Следовательно, ваша логика сравнения тоже изменится.

Например, если бы это был ваш элемент:

<input type="text" id="inpId" name="address" value="* Property Address :" style="top: 30%; position: absolute; "> 
console.log(typeof $('#inpId').position()['top']) // "number" 
console.log(typeof $('#inpId').position()['bottom']) // "undefined" 

См jquery position

EDIT: центровку логику вокруг нижней части, вам нужно вычислить то же самое с точки зрения сверху. Смотрите этот вопрос:

Get bottom and right position of an element

Надеется, что это помогает :)