我的推送菜单中的我的身体动画无效

Question

HTML：我不确定问题是否在这里，但是jquery的链接工作，因为当我从jquery中移除正文动画时，菜单的动画完美无缺。但它没有回去或推动身体，因为我从我的js代码中删除了那部分...我似乎无法看到问题是身体和关闭我的jquery中的标签和事件。请你帮我看一下。我永远感激不尽，我已经筋疲力尽地寻找这个错误了。

＆＃13;

＆＃13;

// 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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您是否尝试为身体的左边缘设置动画？

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