CODEWITHSUNDEEP
javascriptjqueryhtml
Drew Peer
Drew Peer

Reputation: 377

jQuery won't execute with the animate: top 200px function. Yet it will with an animate: height

There is some straight jQuery that hides the open div when clicked not shown, but still adds the height to the navigation to make it seem like it is dropping down.

This script works okay:

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

This doesn't animate at all when clicked: 

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

</script>

Upvotes: 0

Views: 40

Answers (2)

Archy Will He
Archy Will He

Reputation: 9777

You'd need the DOM to have position:relative or absolute in order for positional properties like left, top, etc. to take effect in css.

Upvotes: 1

Alexander Shcheglakov
Alexander Shcheglakov

Reputation: 157

#nav should have position: relative or position: absolute for top animation

Upvotes: 0

Related Questions