Question

我有一个简单的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的高度仍然缩短了。

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

有人可以告诉我是什么原因导致的吗？

感谢。

Answer 1

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

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

Answer 2

我遇到了同样的问题，我通过用min-width和min-height改变宽度和高度解决了我的问题。区别在于我在css文件中具有样式。

jQuery：DIV上的幻灯片动画改变了它的大小

2 个答案: