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