动画后无法获得Div的位置

Question

如果位置已经 30％div链接click上为bottom设置 3px 。 >，如果 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位置设置为bottom 30％，并且它的位置为absolute。
感谢。

Answer 1

position（）返回的对象只包含left和top属性。因此，底层是和未存在的属性，因此您的代码失败。

有关详细信息，请查看jQuery documentation。

Answer 2

jquery position API确实给出了元素的坐标。 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

编辑：要将您的逻辑集中在底部，您需要根据顶部计算相同的值。看到这个问题：

Get bottom and right position of an element

希望有所帮助：）