Here is the code I have written: -
<html>
<head>
<title>Pranav Sharma</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background: #ecf0f1;
font-family: 'Lato', Arial, sans-serif;
}
.panel {
padding-top: 250px;
-webkit-text-stroke: 0.5px;
}
.name {
font-weight: 300;
font-size: 3.2em;
color: #2d383f;
padding: 50px;
}
.projects, .resume, .blog, .aboutme {
font-weight: 300;
font-size: 1.8em;
color: #2d383f;
padding: 20px;
}
a:link {color:#2d383f;}
a:visited {color:#2d383f;}
a:hover {color:#2d383f;}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('.panel').click(function(){$('#pullup').animate({marginTop: '-=15px'});});
</script>
</head>
<body>
<div class="panel" style="text-align: center;" id="pullup">
<span class="name"><a href="">Pranav Sharma</a></span>
<span class="aboutme"><a href="">About Me</a></span>
<span class="blog"><a href="">Blog</a></span>
<span class="projects"><a href="">Projects</a></span>
<span class="resume"><a href="">Resume</a></span>
</div>
</body>
</html>
I have implemented the javascript but unfortunately the div remains stationary. It seems to be related to the CSS. Any idea what might be causing this? My jquery code follows the suggested guidelines from the documentation.