Javascript Jquery内容过滤器淡入淡出效果

我编写了一个小jquery内容过滤器：

例如，如果我在“gfx”和“coding”之间切换，我会在红色的父div上得到这种丑陋的高度重新调整效果。 我的目标是在同一个地方，让小跳水先退后进。无需任何调整大小和使用固定高度。（项目数量以后可能会有所不同）

有什么提示我可以做到这一点吗

var filter = $(this).attr('data-filter');
$('#filter_container .filteritem:not(' + filter + ')').fadeOut('slow', function () {
    $('#filter_container ' + filter + '').fadeIn('fast');
});

有关详细信息和工作示例，请参阅JSFIDLE。

显然会为每个元素调用fadeOut（）回调。这样，它将立即被触发，以防止在淡出（）后出现漂亮的淡出（）效果

但是，您可以通过使用和

.done（function（）{}）

方法来克服这个问题