javascript - JQuery:对 .append 元素的高度进行动画处理

Question

我在单击时附加了多个 div，并且我需要包含元素缓慢增加高度以容纳新附加的 div，而不是立即跳转到新高度。我一直在 stackoverflow 和网络上搜索，但似乎找不到答案；至少以我有限的 jquery 知识无法实现。

我认为最好的方法是在 .fadein 之前将附加 div 的高度从 0px 动画到 40px(或任何高度)？

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });
    $("#livingX").append('<div class="something"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').children(':last').hide().fadeIn(500);
    return false; 
});

这是JSFiddle

当您单击按钮时，新元素会很好地附加淡入淡出，但按钮(以及实际实现中的容器)都会向下跳转到新的位置/高度。我该如何解决这个问题？

任何帮助将不胜感激。

Answer 1

尝试 .find('.add-container:last').hide().slideDown(500) 而不是 .children(':last').hide()。淡入(500):

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });
    $("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').find('.add-container:last').hide().slideDown(500);
    return false;
});

<强> jsFiddle example

或者在滑动时隐藏，然后淡入(如下面评论中的 fiddle 所示)使用:

$("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').find('.add-container:last').hide().css('opacity', 0).slideDown(500, function () {
    $(this).fadeTo('slow',1);
});