jQuery Fadeout留下了小小的差距

Question

我正在使用当前的jQuery隐藏淡出通知div，然后将其删除，但是当它完成时， 的高度周围有一个奇怪的间隙 - 这意味着后续的表单和页面元素不会在通知出现之前显示它们的位置。

回顾一下：淡出和移除是完美的工作，但我想留下的差距也消失了。这是一件小事，但它困扰着我。

jquery：

// Fade out any success divs.
$(".success").fadeOut(6000, function(){
    $(".success").remove();
});

通知div由PHP在回发时编写，并具有以下CSS：

.success {
    background-color: #b3ffb2;
    border: 1px solid green;
}

.box {
    margin: 5px;
    padding: 5px;
}

div非常简单：

<div class="success box"><p><strong>Success!</strong><br />Done!</p></div>

编辑：页面的周围标记如下所示：

<div id="wrapper">

    <div id="navigation">
        <ul> ... </ul>
    </div>

    <div id="container">
        <div class="success box">
            <p><strong>Sucess!</strong><br />
            Done</p>
        </div>
        // more content
    </div>

</div>

编辑：在FF 3.5.2中使用Firebug，我看不到使用检查器留下的任何内容。只有一个奇怪的差距。我还创建了这种现象的截图：

Answer 1

如果没有真正看到它，我认为它是#container或// more content的工件。 $.remove()从字面上删除了DOM中的元素并强制重绘，因此假设它正在工作（语法看似很好），它肯定不是.success的结果。

Answer 2

尝试隐藏（）而不是删除？

Answer 3

我解决了这个问题，我注意到有<br>标签隐藏在淡出后仍然存在。

因此，为了隐藏div之后的第一个元素，我将jquery改为：

$(".success").fadeOut(6000, function(){
    $(".success + br").remove();
});

这将删除选择器后面的dom中的下一个项目。来自jQuery Manual。