javascript - Animate function not working on DIV -
i'm trying let div move off screen on screen... div should come down. i've tried stuff, unfortunately nothing happens :(. right div has position: absolute;
?
please help.
html + jquery
<div id="nav"> <a href="#"><span>1</a> <a href="#"><span>2</a> <a href="#"><span>3</a> <a href="#"><span>4</a> <a href="#"><span>5</a> </div> <div id="hidden"> <h1>text</h1> <p>text</p> </div> <script> var main = function() { $('#nav a:nth-child(1)').click(function() { $('#hidden').animate({ top: +=500px }, 1000); }); }; $(document).ready(main); </script>
css
body { background-image: url("http://static.tumblr.com/97f4b171db68d6ef1836c8fcb9a1c1a3/oi8jcug/xicn5vql3/tumblr_static_aajc47nn2ds8c0k004gskoo0c.jpg"); background-repeat: no-repeat; background-size: cover; padding: 0px; margin: 0px; } { outline: none; } #nav { height: 50px; line-height: 50px; background-color: #1c1c1c; font-size: 0px; text-decoration: none; width: 100%; text-align: center; font-family: sans-serif; margin-bottom: none; } #nav span { display: inline-block; font-size: 25px; padding-left: 10px; padding-right: 10px; text-align: center; border-right: 1px solid white; height: 50px; } #nav span:first-child { border-left: 1px solid white; } #nav span:hover { border-bottom: 2px solid white; } #nav { color: white; text-decoration: none; margin: 0px; padding: 0px; } #hidden { width: 100%; height: 200px; padding-left: 30px; background-color: #1c1c1c; color: red; font-size: 10px; top: -250px; position: absolute; }
thank you, hydracles
change
$('#nav a:nth-child(1)').click(function() { $('#hidden').animate({ top: +=500px }, 1000); });
with
$('#nav a:nth-child(1)').click(function() { $('#hidden').animate({ top: '+=500px' }, 1000); });
Comments
Post a Comment