两种情况：1. slideDown 下拉动画变形，最终定格时正常。
2. slideDown 下拉动画正常，最终定格时消失。
首先来解决第一种情况，很有可能出现第一种情况的你时候你的页面布局是这样的：
-
<div id="out">
-
<div id="middle">
-
<div id="inner"> </div>
-
</div>
-
</div>
-
#out{}
-
#middle{ position:relative; display:none;}
-
#inner{ position:absolute;}
div#out触发点击事件， div#middle做slideDown动画，然后这个时候你会发现div#middle的动画效果就不正常了，查了网上的资料，发现基本都是说由于position的缘故导致slideDown的BUG，最好就是不要用position，或者是将slideDown事件改成show之类的，确实这能避免动画不正常，但是我们却忘记了我们用slideDown的初衷了：为了一个更好的动画。其实解决这个问题的方法很简单，给我灵感的是之前碰到过的float造成父级产生padding，所以我就是在div#out上也同时添加了position:relative，结果奇迹出现了，动画神奇般的正常了，float和position原来是同类遗传病额。
接下来是第二种情况。鉴于是内容消失，动画还是正常的，所以我就在slideDown后callback了个show()，但是很可惜，失败了。有点小失望，用开发者工具看了下，消失的模块安安静静地躺在源代码中，可就是不出现。看样子这货是不能简简单单就出现了，于是心一横，想着反正动画都有了，你要消失，我就让你彻底点，清掉你肚子里的东东然后重新给你塞进去。所以我尝试着$("#slideDownWrap").slideDown().show(function(){$("#slideDownWrap").html($("#slideDownWrap").html()).show();}); OK！ 虽然有点小跳帧的感觉，但是总比木有动画的效果要舒服多了啦~
温馨提示：重写的$("#slideDownWrap").html()中如果还包含JS事件，千万别忘了live一下，否则可是都要失效的噢~
转载自：https://blog.csdn.net/nick848/article/details/8575562