jquery make an animated menu that animates the main body also

Question

im trying to learn some jquery so i wanted to make a responsive menu. The menu is currently "hidden" (-250px left from body) and i have an image, so i want when i click the image the #menu div get animated 250px from left ( so it will get shown at main page) and the main body get animated also 250px left (something like #menu push the body 250px). Here is the code i made but currenlty doesnt work and i get no errors at console-log.

#menu {
position:relative;
float:left;
left:-250px;
}


<img id="menu-icon" src="images/menu_icon.png"/>
<div id="menu">
<ul>
<li>Home</li>
<li>Login/Register</li>
<li>About</li>
<li>Contact</li>
<li>Random</li>
</ul>
</div>


$('#menu-icon').click(function(){
    $('#menu').animate({
    left : "250px" }, 5000, function() {
        $(document).animate({
    left: "250px" 
    });
 });
});

Can someone enlight me on what i do wrong ? I also tried do that with:

$('menu').css("left","250px");

but also nothing happened.

Answer 1

I think this is a better solution :

CSS :

body {
    position : relative;
}

JS :

$('#menu-icon').click(function(){
    $('body').animate({
        marginLeft : '250px' 
    }, 500);
});

Demo : http://jsfiddle.net/7tgkt7b9/

Answer 2

Hope, you are having the code at the end of closing body, if not put your code inside ready handler. And next thing you want to animate to body itself too. So, use 'body' not document.

$(document).ready(function(){
$('#menu-icon').click(function(){
    $('#menu').animate({
    left : "250px" }, 5000, function() {
        $('body').animate({
    left: "250px" 
    });
 });
});
});

And if you want to animate each time by adding 250px then use "+=250px"