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

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

非常感谢任何帮助。

Answer 1

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

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

});

Fiddle

Answer 2

尝试使用.find('.add-container:last').hide().slideDown(500)代替.children(':last').hide().fadeIn(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

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

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

JQuery：为.appended元素的高度设置动画

2 个答案: