Проблема с использованием jQuery remove () для элементов, которые являются inline-block

Question

У меня есть горизонтальная линия элементов 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>

Answer 1

Ну, вот мое решение, если кому-то интересно.

В итоге я немного изменил исходный код jQuery, и, похоже, он работает хорошо. Затем я внес изменения в минимизированную версию с необходимыми настройками.

Вот что я сделал (для неминифицированных):

В функции animate: jQuery, в операторе if(), который проверяет «высоту» и «ширину», я добавил следующее:

// Detect inline-block standard, pre ie8 fix, and pre Firefox 3 fix
opt.ibCheck =(jQuery.css(this,'display') === 'inline-block') || 
            (jQuery.css(this,'zoom') !== 'normal' && jQuery.css(this,'display') === 'inline') || 
            (jQuery.css(this,'display') === '-moz-inline-stack');

Затем в jQuery.fx.prototype.update:, в операторе if(), который проверяет «height», «width» и «this.element.style», я изменил этот оператор if() на следующий:

if ( ( this.prop === "height" || this.prop === "width" ) && this.elem.style && !this.options.ibCheck ) {

... проверка свойства ibCheck, которое было установлено в animate.

Кажется, все работает хорошо. Он проверяет наличие встроенного блока, общего исправления до Firefox 3 или исправления до ie8. Если он найден, он устанавливает для ibCheck значение true. Функция update() не изменит отображение на «блокировка», если ibCheck имеет значение «истина».

Может быть лучше проверить IE. Я полагаю, что если кто-то анимирует элемент «inline» с установленным для zoom значением чего-либо, кроме «normal», это может вызвать проблемы? Что касается меня, я не знал, что IE даже принял атрибут 'zoom' до вчерашнего дня!

Answer 2

Может быть, это связано с тем, что jquery должен преобразовывать его в элемент блока при анимации его ширины? Этот другой вопрос может пролить свет