如何與孩子一起淡入父母的div？

Question

目前我有一個div集裝箱#songs與list它包裹在父div#guts。我使用jQuery appendTo()方法追加新的列表元素。在追加我使用fadeIn()方法，但只有動畫#songsdiv。

我的問題是，如何在同一時間爲父母div製作動畫，以便一旦添加了新元素，家長div#guts能夠順利地延伸？

這是示例代碼：

HTML：

<div class="jumbotron" id="guts"> 
    <button type="button" id="add-btn">Add to playlist</button> 
    <div id="songs"> 
     <ul> 
      <li>Some list element</li> 
     </ul> 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    $("#add-btn").click(function(){ 
     var new_el = "<li>New element</li>"; 
     $(new_el).appendTo("#songs").hide().fadeIn(); 
    }); 
}); 

CSS：

.jumbotron { 
    padding-top: 30px; 
    padding-bottom: 30px; 
    margin-bottom: 30px; 
    background-color: #eee; 
} 

而且fiddle：

Answer 1

像這樣的東西應該這樣做。

$(document).ready(function() { 
    $("#add-btn").click(function(){ 
     var new_el = "<li style=margin-bottom:-20px; opacity:0;>New element</li>"; 
     $(new_el).appendTo("#songs").animate({'margin-bottom':'0', 'opacity':'1'}, 400); 
    }); 
}); 

和CSS

.jumbotron { 
padding-top: 30px; 
padding-bottom: 30px; 
margin-bottom: 30px; 
background-color: #eee; 
} 
#songs li:not(:first-of-type) { 
    opacity: 0 
}  

Answer 2

使用此：

$(document).ready(function() { 
    $("#add-btn").click(function(){ 
    var new_el = "<li>New element</li>"; 
    $(new_el).appendTo("#songs").hide().slideDown(750); // 750ms for smoothly 
    }); 
});