在内联块的元素上使用jQuery remove()时出现问题

我有一行水平的div元素 display:inline-block

我可以添加元素,行就会展开。当我通过将宽度设置为0来移除元素时,线不会保留它的单行外观,而是强制第二条线在动画期间临时出现。

IE、Webkit和Firefox中的行为是相同的。

我可以改变接口来避免这个问题,但是我仍然想知道是什么导致了它,如果可能的话,如何修复它。

body {
    text-align: center;
}
#container {
    height: 20px;
    border: 1px dashed #AAA;
    background: #EEE;
    margin: 0 auto;
    display:table !important;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.item {
    cursor: pointer;
    width: 50px;
    height: 18px;
    border: 1px solid purple;
    vertical-align: top;
    display: inline-block;
    color: white;
    vertical-align: top;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.outer {
    background: orange;
}


$('#add').click(function() {
    $(this).before('<div class="item"></div>')
});

$('#add').click().click().click()

$('.item:not(.outer)').live('click', function() { 
    $(this).animate({width: 1, paddingLeft: 0}, 1000, function() {$(this).remove()}); 
});

<div id="container"><div class='item outer'></div><div id="add" class="item outer">Add</div></div>