固定div上的jQuery slideUp，slideDown高度错误

Question

When I slideUp() or slideDown() fixed div, it jumps.

I have read that it is height problem, but could not solve it. Maybe there is something I can do with padding?

Need some help :)

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

Just add a height and a width to animate smoothly each element you apply slideUp() or slideDown() to.

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

DEMO http://jsfiddle.net/a_incarnati/08ypLtp2/3/