javascript - Jquery slideUp，固定div上的slideDown高度错误

Question

当我 slideUp() 或 slideDown() 固定 div 时，它会跳跃。

我读到这是高度问题，但无法解决。也许我可以用填充做些什么？

需要一些帮助:)

http://jsfiddle.net/sirjay/08ypLtp2/

#tab-menu {
  text-align: center;
  padding-right: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
}

li {
    padding: 15px;
    display: inline-block;
    margin: 0 10px;
    width: 110px;
    background-color: lightblue;
}

.t-hidden {
    display: none;
    padding: 10px;
}


$(function() {
    $('#tab-menu li > a').click(function(e) {
        e.preventDefault();
        var x = $(this).closest('li').find('.t-hidden');
        if (x.is(':visible')) {
            x.slideUp();
        } else {
            x.slideDown();
        }
    });
});


<ul id="tab-menu">
  <li>
    <a href="#" class="btn">First</a>
    <div class="t-hidden">
      Hidden 1
    </div>
  </li>
  <li>
    <a href="#" class="btn">Second</a>
    <div class="t-hidden">
      Hidden 2
    </div>
  </li>
  <li>
    <a href="#" class="btn">Third</a>
    <div class="t-hidden">
      Hidden 3
    </div>
  </li>
</ul>

Answer 1

只需添加一个高度和一个宽度，即可平滑地为您应用 slideUp() 或 slideDown() 的每个元素设置动画。

li {
    padding: 15px;
    display: inline-block;
    margin: 0 10px;
    width: 110px;
    height:90px;
    background-color: lightblue;
}

演示 http://jsfiddle.net/a_incarnati/08ypLtp2/3/