子と一緒に親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 
    }); 
});