Javascript JQuery：设置.added元素的高度动画

我在单击时添加了多个div，我需要包含的元素慢慢增加高度以适应新添加的div，而不是立即跳到它们的新高度。我一直在拖网和网络，但似乎找不到答案；用我在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; 
});

$（“#添加行1”）。单击（函数（）{
var-agi=1；
$（'.item'）。每个（函数（）{
agi++；
});
$（“#livingX”）.append（“”）.children（“：last”）.hide（）.fadeIn（500）；
返回false；
});

这是我的建议

当您单击按钮时，新元素很好地附加了一个fadein，但是按钮（以及实际实现中的容器）都会跳到它们的新位置/高度。我怎样才能解决这个问题

---

非常感谢您的帮助。

您需要在添加新内容之前和之后获得高度。将高度设置为之前的高度，然后将其设置为生成的高度：

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });

    // height before added content
    var heightBefore = $('#livingX').height();

    // append the content and remove inline-styling 
    $("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').removeAttr('style');

    // height after added content
    var heightAfter = $('#livingX').height();

    // set the height to the original height, then animate it to the new height
    $('#livingX').css('height',heightBefore).animate({height: heightAfter}, 500);
    return false;

});

$（“#添加行1”）。单击（函数（）{
var-agi=1；
$（'.item'）。每个（函数（）{
agi++；
});
//添加内容前的高度
var heightBefore=$（'#livingX'）.height（）；
//附加内容并删除内联样式
$（“#livingX”）.append（“”）.removeAttr（'style'）；
//添加内容后的高度
var heightAfter=$（'#livingX'）.height（）；
//将高度设置为原始高度，然后将其设置为新高度
$（'#livingX'）.css（'height'，heightBefore.）.animate（{height:heightAfter}，500）；
返回false；
});

尝试

.find（'.add container:last'）.hide（）.slideDown（500）

而不是

。children（':last'）.hide（）.fadeIn（500）

：

$（“#添加行1”）。单击（函数（）{
var-agi=1；
$（'.item'）。每个（函数（）{
agi++；
});
$（“#livingX”）.append（''）.find（'.add container:last'）.hide（）.slideDown（500）；
返回false；
});

或者在滑动时隐藏，然后淡入（如下面注释中的小提琴所示）使用：

$（“#livingX”）.append（''）.find（'.add container:last'）.hide（）.css（'opacity'，0.）.slideDown（500，函数（）{
$（this.fadeTo（'slow'，1）；
});

+1用于快速工作解决方案。非常感谢。j08691的答案稍微干净一些。这非常有效。是否可以在.slideDown运行时隐藏元素，然后在.fadeIn之后隐藏元素？我很喜欢这种淡入淡出的效果，但如果不能做到这一点，只使用幻灯片肯定比我目前的解决方案要好。太好了。非常感谢！

$("#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;
});

$("#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);
});