1

我目前正在开发一个带有动态添加和删除文件输入框的界面。使用 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');
4

1 回答 1

2

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

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

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

});

工作演示

于 2013-07-16T00:19:53.970 回答