jQuery 在隐藏元素之前使元素变大？答案

【问题标题】：jQuery makes an element bigger before hiding it?jQuery 在隐藏元素之前使元素变大？
【发布时间】：2015-02-17 01:17:18
【问题描述】：

我正在测试 jQuery（我对一般的编程有点陌生），我发现每当我运行代码来隐藏一个元素时，jQuery 都会让它更大（在高度上）然后隐藏它。它看起来很乱，因为不包括 bootstrap 和 reset .css 文件，但是无论有没有它们都会发生错误。

<div class="nav">
  <div class="container">
    <div class="pull-left">
      <span>test1</span> test2</div>
    <ul class="pull-right">
      <li class="nav-button">button1</li>
      <li class="nav-button">button2</li>
      <li class="nav-button">button3</li>
      <li class="nav-button">button4</li>
    </ul>
  </div>
</div>

.nav .container {
  background-color: red;
}

.pull-right li{
  display: inline;
}

.pull-right{
  padding-bottom: 0px;
  margin-bottom: 0px;
}

$(document).ready(function() {

  $('.nav-button').hide(1000);


});

知道为什么吗？谢谢

【问题讨论】：

请添加一个jsfiddle
因为是动画所以直接调用 .hide() 不带任何参数
如果我想要动画，但又不想让它变大怎么办？
这个动画应该做什么？起始高度为 X，目标高度为 X - 隐藏元素。这些高度不能相等。
动画应该让它从原来的大小变成 0，而不是原来的大小 + "x"px 到 0。

标签： jquery html css height

【解决方案1】：

发生这种情况是因为您使用的 jQuery 动画在动画期间将元素设置为 overflow:hidden，这会使对象的显示方式略有不同。

这是该问题的 JsFiddle 演示：https://jsfiddle.net/ed0xd76r/13/

这是最好描述的已知问题in this Stack Overflow question.

【讨论】：