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樣本內嵌批註，就是我從正確的答案是預計除去「中例如字段組的方式「併爲」最後一個示例字段組「和任何其他字段組的重新定位製作動畫。包括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