Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript.
I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div #Header to slide up by 130px, leaving its bottom 20px on screen.
Unfortunately, nothing is happening!
Here's the 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>