jQuery：DIV 上的幻灯片动画更改其大小答案

【问题标题】：jQuery: Slide animation on DIV changes its sizejQuery：DIV 上的幻灯片动画更改其大小
【发布时间】：2011-09-15 13:03:54
【问题描述】：

我有一个简单的 HTML 页面，我在其中尝试在 DIV 上应用幻灯片动画。 DIV 没有什么花哨的，如下所述：

<body>
     <div id="content" style="position:absolute; top: 5%; left: 5%; width:80%; 
                              height:70%; color:#333; background:#eaeaea; 
                              border:1px solid #333;">

          <input type="button" name="buttonId" value="click!"/>

     </div>
</body>

点击按钮会调用一个jQuery动画函数来向右滑动这个DIV：

   $('#content').hide('slide', { direction: 'right' }, 1000);
   $('#content').show('slide', { direction: 'right' }, 500);

现在我面临的问题是，当 DIV 开始滑动动画时，它的高度会明显“挤压”。动画完成后，DIV 将恢复其实际高度。但是通过动画，DIV 的高度仍然缩短了。

我还观察到，当我使用px 或em 之类的固定单位设置DIV 的height 属性时，就没有这种挤压了。只有在%中设置高度时才会出现失真。

谁能告诉我这是什么原因造成的？

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您已经有了解决问题的方法，在调用滑动动画之前获取元素的外部宽度并将其设置为像素。为函数添加回调，并在效果完成动画后将其设置回百分比。

我不知道它为什么会被挤压。

【讨论】：

没错。但我的问题更多是为了理解为什么会这样？

【解决方案2】：

我遇到了同样的问题，我通过改变宽度和高度来解决它，最小宽度和最小高度解决了我的问题。不同的是我在css文件中有样式。

【讨论】：