把slideDown还给IE7—解决IE中slideDown动画出错问题

        再次碰到了IE中这个让人头疼的BUG，记得之前有分享过一篇博客，也是网上搜索到的一些解决方案，其实没能真正的解决问题，只不过是绕过了这块绊脚石，果然，今天还是又碰到了。以下都拿slideDown作例子，slideUp同样操作。

        两种情况：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一下，否则可是都要失效的噢~