Jquery 函数与animate（）一起使用show/hide在IE中显示奇怪的闪烁

我已经创建了一个小功能区，单击页面即可滑动打开和关闭。当我在XP Pro上的IE7中查看ribbon动画时，在函数的“隐藏”部分结束之前，一切都很好

函数的“隐藏”部分向上滑动要隐藏的元素，当隐藏完成时，元素在页面上闪烁，然后再次消失

下面的代码中是否有我不知道的东西会导致这种行为

此外，这里还有一个提琴（在所有其他浏览器中都能正常工作）

这是我的剧本：

$(document).ready(function(){
    $('.extender').animate({
            height: 'hide'
        }, 20);
    $('.special_offers_ribbon_showmore').hover(
    function(){
        $(this).css('cursor', 'pointer');
    },
    function(){
        $(this).css('cursor', 'auto');
    });
    $('.special_offers_ribbon_showmore').click(function(){
        if ($('.extender').hasClass('extended')) {
            $('.extender').animate({
            height: 'hide'
        }, 500, function(){
            $('.extender').removeClass('extended');
            $('.hidedetails').hide();
            $('.showdetails').show();
        });
        } else {
        $('.extender').animate({
            height: 'show'
        }, 200, function(){
            $('.extender').addClass('extended');
            $('.hidedetails').show();
            $('.showdetails').hide();

        });
        }
    });
});

编辑根据注释，我尝试使用

slideUp（）

和

slideDown（）

功能，但仍然在

slideUp（）函数的末尾闪烁。这是纸条（我更喜欢它——看起来更干净……）：

HTML：

<div id="special_offers_ribbon">
<div id="special_offers_ribbon_detail" class="extender">
<img src="../images/ribbon_top.png">
<h1>Book a new meeting for 2012 and save!</h1>
<p>Free meeting space</p>
<p>No set-up fee</p>
<p>Free A/V Packages</p>
<p>&hellip; and much more!</p>
<a href="../events/index.cfm" title="See a full list of the 2012 Meetings and Events special offers here."><img src="../images/learn_more.png"></a>
                                            </div>
 <div id="special_offers_ribbon_opener">
 <img src="../images/ribbon_top.png">
 <h1 class="opener_headline">2012</h1>
 <p class="opener_text">Meetings &amp; Events<br />Special Offers<br /><span class="showdetails special_offers_ribbon_showmore"><img src="../images/showdetails.png" title="Show Details"></span><span class="hidedetails special_offers_ribbon_showmore"><img src="../images/hidedetails.png" title="Hide Details"></span></p>
 </div>
 </div>

我刚刚通过以下方式解决了您的问题：


将
#special_提供功能区
元素的
位置设置为
相对
，将
顶部
设置为
-210px

设置
top
而不是
height
属性的动画

它并不漂亮，但只要元素位于容器内部的视口顶部并应用了
overflow:hidden
，它就可以工作

您是否尝试过滑动切换或滑动/向下滑动？也许值得检查一下，看看这是否有帮助。@MoinZaman我已经用slideUp/slideDown更新了JSFIDLE。还是有同样的问题。对“slideup flicker”进行简单的SO搜索可以找到问题的最可能的解决方案：@vzwick在实现上述修复后，行为没有任何变化。谢谢你给我提供了一些意见。在发布之前，我会小心地深入查看归档文件。明天我会再次查看您的问题–我记得不久前遇到过类似问题。当元素从文档流中删除时，此解决方案对该元素有效。不幸的是，有问题的元素需要保留在文档流中，这让我相信页面上还有其他东西导致了问题，需要更多的调查。
<div id="special_offers_ribbon">
<div id="special_offers_ribbon_detail" class="extender">
<img src="../images/ribbon_top.png">
<h1>Book a new meeting for 2012 and save!</h1>
<p>Free meeting space</p>
<p>No set-up fee</p>
<p>Free A/V Packages</p>
<p>&hellip; and much more!</p>
<a href="../events/index.cfm" title="See a full list of the 2012 Meetings and Events special offers here."><img src="../images/learn_more.png"></a>
                                            </div>
 <div id="special_offers_ribbon_opener">
 <img src="../images/ribbon_top.png">
 <h1 class="opener_headline">2012</h1>
 <p class="opener_text">Meetings &amp; Events<br />Special Offers<br /><span class="showdetails special_offers_ribbon_showmore"><img src="../images/showdetails.png" title="Show Details"></span><span class="hidedetails special_offers_ribbon_showmore"><img src="../images/hidedetails.png" title="Hide Details"></span></p>
 </div>
 </div>

p.ribbon_room {
    padding:0 210px 0 0;
}
#special_offers_ribbon {
    width:267px;
    float:right;
    padding:0px 0px 110px 0px;
    margin:0px 0px;
    background:transparent url(../images/ribbon.png) bottom center no-repeat;
    text-align:center;
}
#special_offers_ribbon h1 {
    margin:1px 50px 0 50px;
    padding:10px 0 0 0;
    border-top:1px dotted #eee7c6;
    color:#eee7c6;
}
#special_offers_ribbon p {
    margin:0 50px 0 50px;
    padding:0;
    color:#eee7c6;
}
#special_offers_ribbon p span.hidedetails {
    display:none;
}
#special_offers_ribbon div#special_offers_ribbon_detail a img{
    border:none;
}