javascript - jQuery 不会使用 animate : top 200px function. 执行，但它会使用 animate: height 执行

Question

有一些直接的 jQuery 在单击时隐藏打开的 div 未显示，但仍将高度添加到导航中以使其看起来好像要掉下来了。

这个脚本工作正常:

    <script>
    $(document).ready(function(){
        $("#openNav").click(function(){
            $("#nav").animate({height: "200px"});
        });
        $("#closeNav").click(function(){
            $("#nav").fadeOut();
            $("#nav").animate({height: "100px"});
        });
    });
</script>

单击时根本不会产生动画:

<script>
$(document).ready(function(){
    $("#openNav").click(function(){
        $("#nav").animate({top: "+100px"});
    });
    $("#closeNav").click(function(){
        $("#nav").fadeOut();
        $("#nav").animate({height: "-100px"});
    });
});

</script>

Answer 1

您需要 DOM 具有 position:relative 或 absolute 才能获得 left、top< 等位置属性等在css中生效。