这里是css,html和js来重现：
HTML：
<div id="outer">
<div>123</div>
<div id="inner">345</div>
</div>
CSS：
#outer {
-moz-border-radius: 5px;
border-radius: 5px;
Box-shadow: 0px 3px 2px rgba(0,0.3);
}
#inner {
height: 200px;
}
JS：
$(function() {
$('#outer').click(function() {
$('#inner').slideUp();
});
});
和http://jsfiddle.net/DwApF/以及
这个问题的任何解决方法？
解决方法
尝试#1
http://jsfiddle.net/DwApF/3/
这将隐藏影子,然后在幻灯片完成后恢复.这是一个解决办法,但这是一种可以规避各种行为的方式.
尝试#2
http://jsfiddle.net/DwApF/11/
这可以同时动画外部和内部容器.它幻灯片没有任何工件.但是,您需要手动操作外部容器的高度,并且还可以隐藏内部容器的内容.它确实消除了工件问题.
尝试#3 – 我的首选解决方案
http://jsfiddle.net/DwApF/12/
这仍然使用外部/内部容器的同时动画.我在IE9中看不到任何文物.它还使用overflow：hidden处理隐藏内部容器的内容.
外部容器的尺寸仍然必须手动完成,但我认为这是一个充分的解决方案.应该有一种方法来确定使用jQuery的折叠高度,以便该值不需要硬编码.
该解决方案适用于IE9,Chrome和Firefox.请注意,我添加了一些颜色/边框,以便更容易看到不同的容器.