jQuery .slidDown() 动画后边距发生变化
我在工作中创建了这个网站，http://eco-spirit.ca/，（IE版本是'尚未完成，因此最好在 Chrome/Safari/Firefox 中查看），当您单击顶部的图标时，我使用 .slideDown() 方法显示一个小简介。这一切都按照老板要求的方式进行，但我注意到动画结束后，文本突然增加了大约 10-15 像素，就好像边距正在改变一样。调用 .slideUp() 方法时也会执行相同的操作。
有谁知道为什么会发生这种情况？
（ps：这个网站不是我设计的，我只是编程的）
I created this site at work, http://eco-spirit.ca/, (the IE version isn't done yet, so it's best viewed in Chrome/Safari/Firefox), and when you click on the icons at the top I use the .slideDown() method to show a small blurb. It all works the way the boss asked but I noticed right after the animation, the text bumps up about 10-15 pixels, as if the margin is changing. And it does the same when the .slideUp() method is called.
Does anyone know why this would happen?
(ps I didn't design this site I just programmed it)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当 HTML 元素被动画化时，它们具有“块”的显示样式并且是绝对定位的。动画期间这些元素的边距不包含在周围元素的计算中。动画完成后，它们的原始显示和位置属性将恢复。
处理此问题的最佳方法是将这些元素的边距放入非动画的容器元素中。
When the HTML elements are being animated, they have a display style of 'block' and are absolutely positioned. The margins of these elements aren't included in the calculations of the surrounding elements during animation. Once the animation is complete, their original display and position attributes are restored.
The best way to handle this is to put the margins for these elements in a container element, that is not animated.