jQuery Анимация элементов сиблинга после удаления среднего брата

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 образцом, что я ожидал от правильного ответа является способом удалить «среднюю группу Примера поля »и оживить повторное позиционирование« последней примерной группы полей »и любых других групп полей, которые будут за ней.

Edit: 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, так как это то, о чем вы просили, но это не сложно было бы обновить, чтобы заставить ее работать для любого файла.

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

}); 

Working Demo