Question

我创建了一个小的功能区，可以通过点击我的页面来打开和关闭。当我在XP Pro上查看IE7中的功能区动画时，一切都很有效，直到功能的“隐藏”部分结束。

该功能的“隐藏”部分向上滑动要隐藏的元素，就像它完成隐藏一样，元素在页面上闪烁然后再次消失。

以下代码中是否存在导致我不知道此行为的内容？

此外，这是一个小提琴（在所有其他浏览器中都可以正常工作）...... Slider ribbon jsfiddle

这是我的剧本：

$(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()的末尾点亮了闪烁功能。这是潦草的（我更喜欢它 - 看起来更干净......）：

$('.special_offers_ribbon_showmore').hover(

function() {
    $(this).css('cursor', 'pointer');
}, function() {
    $(this).css('cursor', 'auto');
});
$('.special_offers_ribbon_showmore').click(function() {
    if ($('.extender').is(':hidden')) {
        $('.extender').slideDown(
            'slow', 
            function() {
            $('.hidedetails').show();
            $('.showdetails').hide();
        });
    } else {
        $('.extender').slideUp(
            'slow',
            function() {
            $('.hidedetails').hide();
            $('.showdetails').show();

        });
    }
});

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>

而且，CSS：

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;
}

Answer 1

我刚刚解决了你的问题：

将#special_offers_ribbon元素的position设置为relative，将top设置为-210px
动画top而不是height属性。

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

Working Fiddle here

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

1 个答案: