JQuery slideUp不能正常工作;按像素分配幻灯片长度

Question

在页面底部，我有一个固定位置的div元素。下面是另一个div，但是隐藏的(它在页边距之外)。我试着把两个div都向上滑动这样底部的那个就可见了(从页边距里出来)，但是JQuery有点混乱，slideUp让它向下滑动而我不能用像素来确定幻灯片的长度?

$(document).ready(function() {
  $('#butt').click(function() {
    $('#messbar').slideUp();
    $('#botbar').slideUp();
  });
  $('#reset').click(function() {
    $('#messbar').slideDown();
    $('#botbar').slideDown();
  });
});

#container {
  height: 600px;
}
#botbar {
  position: fixed;
  margin: auto;
  height: 20px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: red;
  text-align: center;
}
#messbar {
  position: fixed;
  margin: auto;
  height: 20px;
  bottom: -20px;
  left: 0px;
  right: 0px;
  background-color: blue;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <button id="butt">Slide</button>
  <button id="reset">Reset</button>
  <div id="botbar">
    text
  </div>
  <div id="messbar">
    more text
  </div>
</div>

这是我目前得到的。下面是点击"slide"时的效果:

    #container {
      height: 600px;
    }
    #botbar {
      position: fixed;
      margin: auto;
      height: 20px;
      bottom: 20px;
      left: 0px;
      right: 0px;
      background-color: red;
      text-align: center;
    }
    #messbar {
      position: fixed;
      margin: auto;
      height: 20px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: blue;
      text-align: center;
    }

<div id="container">
  <div id="botbar">
    text
  </div>
  <div id="messbar">
    more text
  </div>
</div>

当重置时，它应该显示为第一个代码段所在的初始位置。

我要找的是点击"slide"，#botbar和#messbar都向上滑动20px，点击"reset"，都向下滑动20px。

我能做什么?

Answer 1

$(document).ready(function() {
  $('#butt').click(function() {
    $('#messbar').animate({bottom:0});
    $('#botbar').animate({bottom:$('#messbar').height()});
  });
  $('#reset').click(function() {
    $('#messbar').animate({bottom:-($('#messbar').height())});
    $('#botbar').animate({bottom:0});
  });
});

#container {
  height: 600px;
}
#botbar {
  position: fixed;
  margin: auto;
  height: 20px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: red;
  text-align: center;
}
#messbar {
  position: fixed;
  margin: auto;
  height: 20px;
  bottom: -20px;
  left: 0px;
  right: 0px;
  background-color: blue;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <button id="butt">Slide</button>
  <button id="reset">Reset</button>
  <div id="botbar">
    text
  </div>
  <div id="messbar">
    more text
  </div>
</div>