尝试使用marginTop单击同时动画页面

Question

我没有找到我搜索过的任何地方，所以我觉得是时候发帖了，看看你们中是否有人可以帮我找出错误的地方。我可以让我的页面在css中同时进行转换，但它正在搞乱我的jQuery动画的其余部分。所以...决定使用jQuery动画来回上下。到目前为止，我可以正确地向下设置为marginTop 0，但是由于它们在底部堆叠而无法同时对页面进行动画处理。

$(document).ready(function() {

  $('.item').on('click', function() {
    var $attr = $(this).attr("href");
    if ($attr) {
      $($attr).animate({ // this animates page down correctly
        marginTop: '0%'
      }, 1000);
    } else {
      $($attr).animate({    // trying to animate page back up, won't work
        marginTop: '-500%'
      }, 1000);
    }
  });

});

.panel {
  width: 60%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: -500%; /* negative margin to hide the page */
  position: absolute;
  background: grey;
}

#navigation {
  position: fixed;
  z-index: 6;
  height: 100%;
  width: 20%;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-left: -1px solid lightgrey;
  border-left-width: ;
  list-style: none;
  z-index: 3
}

.item {
  padding: 20px 0 20px 10px;
  background-color: #ffffff;
  display: block;
  border-bottom: 1px solid lightgrey;
  color: grey;
  text-decoration: none;
  z-index: 3;
}
I can achieve what I am trying to do with transitions in CSS but it creates bugs with my other JavaScript 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Design Page-->
<div id="design" class="panel">
  <div class="content">
    <div class="container">
      <h1>Design</h1>
    </div>
  </div>
</div>
<!-- /Design -->

<!-- Creativity Page-->
<div id="creativity" class="panel">
  <div class="content">
    <div class="container">
      <h1>Creativity</h1>
    </div>
  </div>
</div>
<!-- /Creativity -->

<div class="right-toggle">
  <ul id="navigation">
    <li><a class="item" id="link-design" href="#design">DESIGN</a></li>
    <li><a class="item" id="link-creativity" href="#creativity">CREATIVITY</a></li>
  </ul>
</div>

我有两个导航按钮来帮助解释，当点击一个按钮时，我的页面的负边距设置为marginTop 0，另一个页面假设为动画备份。

Answer 1

$(document).ready(function() {

  $('.item').on('click', function() {
    var href = $(this).attr("href");
    var $toAnimate = $(href);
 
      $toAnimate.animate({
        marginTop: '0%'
      }, 1000);
    
      $toAnimate.siblings('.panel').animate({
        marginTop: '-500%'
      }, 1000);
  });

});

.panel {
  width: 60%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: -500%; /* negative margin to hide the page */
  position: absolute;
  background: grey;
}

#navigation {
  position: fixed;
  z-index: 6;
  height: 100%;
  width: 20%;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-left: -1px solid lightgrey;
  border-left-width: ;
  list-style: none;
  z-index: 3
}

.item {
  padding: 20px 0 20px 10px;
  background-color: #ffffff;
  display: block;
  border-bottom: 1px solid lightgrey;
  color: grey;
  text-decoration: none;
  z-index: 3;
}
I can achieve what I am trying to do with transitions in CSS but it creates bugs with my other JavaScript 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Design Page-->
<div id="design" class="panel">
  <div class="content">
    <div class="container">
      <h1>Design</h1>
    </div>
  </div>
</div>
<!-- /Design -->

<!-- Creativity Page-->
<div id="creativity" class="panel">
  <div class="content">
    <div class="container">
      <h1>Creativity</h1>
    </div>
  </div>
</div>
<!-- /Creativity -->

<div class="right-toggle">
  <ul id="navigation">
    <li><a class="item" id="link-design" href="#design">DESIGN</a></li>
    <li><a class="item" id="link-creativity" href="#creativity">CREATIVITY</a></li>
  </ul>
</div>