如何 fadeIn parent div 与 child 一起？

Question

目前我有一个 div 容器 #songs 和一个 list 包裹在父 div #guts 中。我正在使用 jQuery appendTo() 方法附加新的列表元素。在追加时，我使用 fadeIn() 方法，但是它只会为 #songs div.

设置动画

我的问题是，我怎样才能同时为父元素 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
}

如何 fadeIn parent div 与 child 一起？

How to fadeIn parent div along with the child?

html

javascript

css

jquery

fadein