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 から要素を削除する完了時にコールバックを行います。

次の例では、あなたが求めていたので、私は middlefileFieldを非表示にしていますが、これを更新して任意の fileField で機能するようにすることは難しくありません。

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

});

ワーキングデモ

于 2013-07-16T00:19:53.970 に答える