0

我创建了一个小功能区，单击我的页面即可滑动打开和关闭。当我在 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()andslideDown()并且我仍然在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;
}
4

1 回答 1

0

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

  • 设置#special_offers_ribbon元素的positiontorelative和topto-210px
  • 动画top而不是height属性。

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

在这里工作小提琴

于 2012-06-14T15:18:54.170 回答