我的推送菜單中的我的身體動畫無法正常工作

Question

HTML：我不確定問題出在這裏，但是指向jquery的工作，因爲當我從jquery中完美地移除菜單工作的動畫時，但它不返回或推動身體，因爲我從我的js代碼中刪除了該部分...我似乎無法看到什麼問題與身體和關閉標籤和事件在我的jQuery中。請你檢查一下我是否永遠gratefulllll我筋疲力盡尋找錯誤。

// jQuery:seems to work when i remove the body animations or in other words leave the menu animations 
 

 
var main = function(){ 
 
    $('.icon-menu').click(function(){ 
 

 
    $('.menu').animate({ 
 
     left:'0px' 
 
    },350); 
 

 
    $('body').animate({ 
 
     left:'290px' 
 
    },350); 
 

 
    $('.close').click(function(){ 
 
     $('.menu').animate({ 
 
     left:'-290px' 
 
     },350); 
 

 
     $('body').animate({ 
 
     left:'0px' 
 
     },350); 
 
    }); 
 
    }; 
 

 
$(document).ready(main);

.menu { 
 
    height:50%; 
 
    width:285px; 
 
    left:-290px; 
 
    position:fixed; 
 
    color:#000000; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    border-radius:10px; 
 
    top: 5%; 
 
} 
 

 
.menu ul { 
 
    border-top: 1px solid rgba(99,99,102,.5); 
 
    border-opacity-top:0.5; 
 
    list-style: none; 
 
    margin-left: 30px; 
 
    margin-right:30px; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #636366; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 50px; 
 
    padding-bottom: 3px; 
 
    padding-left: 20px; 
 
    padding-top: 3px; 
 
    text-align: center; 
 
    opacity:0.5; 
 
    cursor: pointer; 
 

 
} 
 

 
.menu li:hover{ 
 
    opacity:1.0; 
 
    background-color: rgba(255,255,255,0.4); 
 
} 
 

 
.close{ 
 
    cursor: pointer; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    text-align: center; 
 
} 
 
.close:hover{ 
 
    background-color: rgba(255,255,255,0.4); 
 

 
} 
 

 
.jumbotron{ 
 
    height: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 

 
} 
 

 
.icon-menu { 
 
    color: #000000; 
 
    cursor: pointer; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 20px; 
 
    margin-left:20px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
    padding-top: 25px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    width:80px; 
 
    opacity:0.5; 
 
    transition: all 0.3s ease-in; 
 
} 
 

 
.icon-menu:hover{ 
 
    transition: all 0.3s ease-in; 
 
    opacity:1; 
 
} 
 

 
.icon-menu i { 
 
    margin-right: 5px; 
 
} 
 

 
html,body{ 
 
    left: 0px; 
 
    overflow: hidden; 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300'rel='stylesheet' type='text/css'> 
 

 
<img style="position:absolute; left:430px" src="Pumpkin5.jpg"> 
 

 
<div class='hol'> 
 
    <link href="Pumpkin Box.css" rel="stylesheet"/> 
 
    <div class="menu"> 
 
    <div class="close"> 
 
     <img src="close.png"/> 
 
    </div> 
 
    <ul> 
 
     <li>About</li> 
 
     <li>Help</li> 
 
     <li>Blog</li> 
 
     <li>Contact</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="jumbotron"> 
 
    <div class="icon-menu"> 
 
     <i class="fa fa-bars"></i> 
 
     Menu 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你有沒有嘗試動畫利潤率左的身體？

$('body').animate({ 
    marginLeft:'290px' 
},350);