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
}

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
  });
});

如何与孩子一起淡出父div？

2 个答案: