jquery - 对内联 block 元素使用 jQuery remove() 时出现问题

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 的源代码做了一点修改，看起来效果很好。然后我通过必要的调整将更改放入缩小版本中。

这是我所做的(对于非缩小版):

在 jQuery 的 animate: 函数中，在检查“高度”和“宽度”的 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 ) {

...检查在“animate”中设置的 ibCheck 属性。

一切似乎都进展顺利。它检查内联 block 、常见的 Firefox 3 之前的修复或 ie8 之前的修复。如果找到，它将 ibCheck 设置为“true”。如果 ibCheck 为“true”，update() 函数不会将显示更改为“block”。

可以对 IE 进行更好的检查。我想如果有人对“内联”元素进行动画处理，并将“缩放”设置为“正常”之外的任何内容，它可能会导致问题吗？至于我，直到昨天我才知道 IE 甚至接受了“缩放”属性!