相對定位的元素在動畫化它的父元素時消失

Question

動畫期間元素#open和消失時，他們不應該這樣做。

這裏是代碼，在這個框下是jsfiddle。

/* 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(); 

    }}); 

}); 

---

我已經在不同的瀏覽器進行了測試，他們都讓它消失。

爲什麼會發生這種情況，我該如何解決？

小提琴：http://jsfiddle.net/aaQhF/1/

Answer 1

的問題是，jQuery的設置與overflow:hidden

你只需要添加

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

要刪除默認行爲默認樣式。

http://jsfiddle.net/aaQhF/3/