Question

我目前正在使用动态添加和删除文件输入框的界面。使用jQuery我已经能够设置容纳所有文件输入框的容器元素的视觉外观，并淡化添加空间后添加的元素。

让我感到困惑的是，如果文件输入框从堆叠中间移除，其他文件将在移除后卡入到位。

我想知道的是，是否有人有过如何动画删除中间元素后存在的元素的经验。

近似HTML：

<div class="fileFields">
    <!-- first example field group -->
    <div class="fileField">
        <span class="buttonBrowse"></span>
        <span class="fileName"></span>
        <span class="hiddenInput"><input name="file_0" type="file" /></span>
        <span class="buttonRemove"></span>
    </div>
    <!-- middle example field group -->
    <div class="fileField">
        <span class="buttonBrowse"></span>
        <span class="fileName"></span>
        <span class="hiddenInput"><input name="file_1" type="file" /></span>
        <span class="buttonRemove"></span>
    </div>
    <!-- last example field group -->
    <div class="fileField">
        <span class="buttonBrowse"></span>
        <span class="fileName"></span>
        <span class="hiddenInput"><input name="file_1" type="file" /></span>
        <span class="buttonRemove"></span>
    </div>
</div>
<div class="fileFieldControls">
    <span class="buttonAdd"></span>
</div>

因此，为了清楚起见，如果您使用HTML示例查看内联注释，我从正确答案中得到的是删除“中间示例字段组”并为“最后一个示例”重新定位设置动画的方法字段组“以及其后的任何其他字段组。

编辑：包含jQuery代码

function buttonAddClick() {

    // Container...
    fileField = $('<div class="fileField"></div>');

    // Interior elements...
    fileField.append('<span class="buttonBrowse">'+svgButtons['browse']+'</span>');
    fileField.append('<span class="fileName"></span>');
    fileField.append('<span class="hiddenInput"><input name="" type="file" /></span>');
    fileField.append('<span class="buttonRemove">Remove</span>');

    // Actions...
    fileField.children('.buttonBrowse').on('click', function() {
        $(this).siblings('.hiddenInput').find('input[type=file]').trigger('click');
    });
    fileField.children('.hiddenInput').find('input[type=file]').on('change', function() {
        $(this).parent().siblings('.fileName').html($(this).val().split('\\').pop());
    });
    fileField.children('.buttonRemove').on('click', function() {
        $(this).parent().fadeOut(500, function() {

            // This is where the question answer will likely go...

            $(this).remove();
            $('.fileFields').animate( { "height" : $('.fileFields').outerHeight() - 37 }, 500);
        });
    });

    // Animate the field adding...
    $('#groupFiles').animate( { "height" : $('#groupFiles').outerHeight() + 37 }, 500, function() {
        fileField.appendTo('.fileFields').hide().fadeIn(500);
    } );

}

// Add Button Actions...
$('.buttonAdd').on('click', buttonAddClick);
$('.buttonAdd').trigger('click');

Answer 1

您可以将可见性设置为hidden，使元素在占用空间时不可见。然后将高度设置为0并在完成时进行回调，从DOM中删除元素。

在下面的示例中，我隐藏了中间fileField，因为这就是您所询问的内容，但要更新它以使其适用于任何fileField并不难。

$('#remove').on('click', function () {
    $('.fileField').eq(1).css('visibility', 'hidden').animate({
        height: 0
    }, 300, function () {
        $(this).remove();
    });

});

<强> Working Demo

中间兄弟姐妹移除后的jQuery Animate兄弟元素

1 个答案: