gpt4 book ai didi

javascript - jQuery:DIV 上的幻灯片动画改变其大小

转载 作者:行者123 更新时间:2023-11-28 10:11:00 28 4
gpt4 key购买 nike

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

我还观察到,当我使用 pxem 等固定单位设置 DIV 的 height 属性时,就没有这样的挤压。仅当高度设置为 % 时才会发生扭曲。

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

谢谢。

最佳答案

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

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

关于javascript - jQuery:DIV 上的幻灯片动画改变其大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7431310/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com