ie7下元素莫名消失（slideDown动画）---- 解决slideDown兼容ie7

　

slidedown

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

两种情况：1. slideDown 下拉动画变形，最终定格时正常。

2. slideDown 下拉动画正常，最终定格时消失。

首先来解决第一种情况，很有可能出现第一种情况的你时候你的页面布局是这样的：

1. <p id="out">

2. <p id="middle">

3. <p id="inner"></p>

4. </p>

5. </p>

1. #out{}

2. #middle{ position:relative; display:none;}

3. #inner{ position:absolute;}

p#out触发点击事件， p#middle做slideDown动画，然后这个时候你会发现p#middle的动画效果就不正常了，查了网上的资料，发现基本都是说由于position的缘故导致slideDown的BUG，最好就是不要用position，或者是将slideDown事件改成show之类的，确实这能避免动画不正常，但是我们却忘记了我们用slideDown的初衷了：为了一个更好的动画。其实解决这个问题的方法很简单，给我灵感的是之前碰到过的float造成父级产生padding，所以我就是在p#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

相关阅读

css3实现 slideUp/slideDown效果

1. 纯css3实现<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1> <input id="toggle" type="checkbox"><label for="toggl

填坑——jquery中slideUp()，slideDown()的方向问题

写的项目里有一个动画效果：自上而下消失，自上而下显示，这个效果和jquery中的slideUp()，slideDown()函数相同，但是方向相反，然而函数中并