Question

我有2个div和a＆amp; b以及关闭和打开按钮（直到单击关闭才打开）。当我单击关闭div时，隐藏了一个，并且div b的宽度被动画为100％。这是按预期工作，直到我添加html,body{height:100%}，我需要它，以便所有内容占用可用浏览器高度的100％。当我点击关闭div b“闪烁”因为jQuery animate正在向其添加overflow:hidden。如果我向元素添加overflow:visible !important，则会删除闪存，但不会以我想要的方式设置动画（从height:100% div中移除#content以查看所需的结果）。如何让我的动画不进行闪光并仍能达到预期的效果呢？

HTML

    <div id="content" style="height:100%">
    <div id="openBtn" style="background:aquamarine;display:none;top:0;position:absolute;left:0">Open</div>
    <div id="titleVidNavContainer" style="float:left;width:20%;position:relative;height:100%">
        <div id="videoTitleNav" style="min-height:100%; height:500px;background:purple;white-space: nowrap;">&nbsp;</div>       
        <div id="hideBtn" style="background:aquamarine; position:absolute;top:0;right:-35px;display:inline-block">Close</div>
    </div>
    <div id="videoContent" style="background:aqua;height:500px;width:80%;float:left;height:100%">&nbsp;</div>       
</div>

CSS

html,body{height:100%}

的jQuery

         $("#hideBtn").click(function () {
            $(this).hide("slide", { direction: 'left' }, 200);
            setTimeout(function() {
                $("#titleVidNavContainer").animate({ width: '0' });
                $("#videoContent").animate({ width: '100%' }).css({ 'float': 'none' });
                $("#openBtn").show("slide", { direction: 'left' }, 500);
            },300);
        });

        $("#openBtn").click(function () {
            $(this).hide();
            $("#titleVidNavContainer").animate({ width: '20%' },400);
            setTimeout(function() { $("#hideBtn").show("slide", { direction: 'left' }, 200); },500);
            //setTimeout(function() { $("#videoContent").animate({ width: '80%' }).css('float', 'left'); },1000);
            $("#videoContent").css('float', 'left').animate({ width: '80%' });
        });

编辑：我原本选择不为此包含jsFiddle，因为它不像我看到的那样复制问题。无论它有什么帮助 - jsfiddle.net/comatoseduck/KstHH

编辑2：这就像我到目前为止所做的那样接近，但它仍然没有给我预期的结果 - jQuery .animate() forces style “overflow:hidden”

Answer 1

尝试

html,body{margin: 0; padding: 0;}

而不是

html,body{height:100%}

隐藏div隐藏：溢出问题

1 个答案: