所以我正在学习 jQuery，我认为我缺少一些东西。我在“div”标签上使用以下代码:
$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });
当它完成动画时，这似乎是最后的跳跃。关于如何摆脱它有什么想法吗？
编辑:div 标签的 css
<div id="faq-group-notice" class="flash notice hidden"></div>
.hidden {
display: none;
}
.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
最佳答案
看看这个 update to your jsFiddle .
“跳跃”来自您放置在隐藏/显示的 div 上的边距和边框。高度动画(以及内置幻灯片效果)不考虑边距和边框。结果，动画运行(例如，在“隐藏”上)，它将元素的内部高度折叠为零，然后应用display:none - - 由于元素的边距和边框仍然可见，因此应用 display:none 会导致元素“消失”。当您显示这样的元素时，会发生相反的情况 - 它“突然”出现，然后内部高度从零扩展到元素的原始/自然高度。
在我对 jsFiddle 的调整(上面链接)中，我只是添加了一个 div 来包装您隐藏/显示的内容，并且我已经移动了您的 css 类 flash 和 注意内部div。现在，所有的可见内容(包括边距和边框)都在内部#faq-group-notice，所以当高度动画效果运行时，它会折叠所有东西——不仅仅是边框内的东西。
关于jQuery 动画导致屏幕跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4359975/