jQuery动画导致屏幕跳转 [英] jQuery animate causing screen to jump
问题描述
所以我正在学习jQuery，我认为我缺少一些东西.我在"div"标签上使用了以下代码:
So I'm learning jQuery and I think there is something that I am missing. I am using the following code on a "div" tag:
$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });
完成动画时，这似乎是最后一次跳跃.关于如何摆脱这一点的任何想法?
It appears to be a final jump when it is finishing the animation. Any ideas about how to get rid of that?
div标签为css
<div id="faq-group-notice" class="flash notice hidden"></div>
.hidden {
display: none;
}
.hidden {
display: none;
}
.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
推荐答案
查看此更新到您的jsFiddle .
跳跃"来自隐藏/显示在div上的边距和边框.高度动画(以及内置的幻灯片效果)不考虑边距和边框.结果，动画运行了(例如，在隐藏"上)，将元素的内部高度折叠为零，然后应用了display:none-因为元素的边距和边框仍然可见，使用display:none会使元素消失"不存在.当您显示此类元素时，情况恰恰相反-它闪烁"存在，然后 interior 的高度从零扩展到该元素的原始/自然高度.
The "jump" is coming from the margin and border that you have put on the div that's being hidden/shown. The height animation (and also the built-in slide effects) don't account for margin and border. As a result, the animation runs, (for example, on a "hide") it collapses the interior height of the element to zero, then it applies display:none -- since the element's margin and border are still visible, the application of display:none causes the element to "blip" out of existence. The opposite happens when you show such an element -- it "blips" into existence, then the interior height expands from zero to the original/natural height of the element.
在调整jsFiddle的过程中(上面已链接)，我仅添加了一个div，用于包装要隐藏/显示的内容，并且已将css类flash和notice移至内部div .现在，可见内容的所有 (包括边距和边框)都在内部 #faq-group-notice，因此，当高度动画效果运行时，它会折叠所有内容-不只是边界内的东西.
in my adjustment of your jsFiddle (linked above), I have simply added a div that wraps the content you're hiding/showing, and I've moved your css classes flash and notice to the interior div. Now, all of the visible content (including the margin and border) are inside #faq-group-notice, so when the height animation effect runs, it collapses everything -- not just the stuff inside the border.
这篇关于jQuery动画导致屏幕跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
