Javascript 设置相对定位元素动画时，该元素将消失'；s父元素

元素

#open

和

#close

在动画中不应该这样做时会消失

这是代码，在这个框下面是JSFIDLE

/* CSS */
#web { width:700px; height:600px; background:#ce5a3e}
#dreta { width:200px; height:600px; background:#000; float:right; position:relative }
#open { position:absolute; top:0; left:-50px; display:none; color:#fff; }
#close { position:absolute; top:0; left:-50px; color:#fff; }

<!-- HTML -->
<div id="web">  
    <div id="dreta">
        <a id="close" href="#">Close</a>
        <a id="open" href="#">Open</a>
    </div>
</div>
// JAVASCRIPT
$("#close").click(function() {   

    $("#dreta").animate({width: 0}, {duration: 1000,easing: "easeOutQuint",complete: function() {

        $("#close").fadeOut();
        $("#open").fadeIn();

    } });

});

$("#open").click(function() {

    $("#dreta").animate({width: '200px'}, {duration: 1000, easing: "easeOutQuint", complete: function() {

        $("#close").fadeIn();
        $("#open").fadeOut();

    }});

});

/*CSS*/
#腹板{宽度：700px；高度：600px；背景：#ce5a3e}
#dreta{宽度：200px；高度：600px；背景：#000；浮点：右；位置：相对}
#打开{位置：绝对；顶部：0；左侧：-50px；显示：无；颜色：#fff；}
#关闭{位置：绝对；顶部：0；左侧：-50px；颜色：#fff；}
//JAVASCRIPT
$（“#关闭”）。单击（函数（）{
$（“#dreta”）.animate（{width:0}，{duration:1000，easeOutQuint”，complete:function（）{
$（“#关闭”）.fadeOut（）；
$（“#打开”）.fadeIn（）；
} });
});
$（“#打开”）。单击（函数（）{
$（“#dreta”）.animate（{width:'200px'}，{duration:1000，ease:“easeOutQuint”，complete:function（）{
$（“#关闭”）.fadeIn（）；
$（“#打开”）.fadeOut（）；
}});
});

---

我在各种浏览器中测试过它，它们都使它消失了

为什么会发生这种情况？我如何修复它

---

Fiddle:

问题在于jQuery使用

overflow:hidden

你只需要添加

$("#dreta").animate().css("overflow","visible");

消除这种默认行为

---

问题在于jQuery将默认样式设置为

overflow:hidden

你只需要添加

$("#dreta").animate().css("overflow","visible");

消除这种默认行为