Home/ Questions/Q 8651951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:11:36+00:00

I am trying to Animate a div’s top position by -130px, so it will

  • 0

I am trying to Animate a div’s top position by -130px, so it will move off screen. Its not working and i cant workout why! Am obviously a jQuery/Javascript novice.

Basically i have a button/hyperlink with the id #NavShrink, on clicking this i want the div #Header to slide up off screen by 130px, leaving its bottom 20px on screen.

Nothing happens!

Here’s my code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding:0px;
margin:0px;
font-family: Helvetica, sans-serif;
font-size:11px;
color:#7b7a7a;
}


#Header {
height:150px;
background-color:#f4f4e9;
}



#MainNav {
padding:20px 20px 0px 20px;
width:1140px;
margin-left:auto;
margin-right:auto;
text-align:right;

position:relative;
height:130px;
}




a#NavShrink {
display:block;
width:15px;
height:15px;
background-image:url(../images/ShrinkNav.png);
position:absolute;
bottom:5px;
right:0px;
}

</style>
</head>
<body>
<div id="Wrap">
<div id="Header">
    <div id="MainNav">
            <script language="javascript" type="text/javascript">
            $('#NavShrink').click(function() {
            $('#Header').animate({ top: "-=130px"})
            })
            </script>
            <a href="#Shrink" id="NavShrink"></a>


</div>
</div>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In addition to the issue raised by j08961, another problem, I imagine, is that you’re animating the top property; which effectively has no meaning in a div (or other element) with position: static (the default position property).

    To animate, simply assign position: relative to the relevant div.

    Brief, though hopefully illustrative, JS Fiddle demo.

    • 0