jQuery Fadeout hinterlässt kleine Lücke

Question

Ich verwende die aktuelle jQuery zu ausblenden eine Benachrichtigung div, und entfernen Sie es dann, jedoch wenn es abgeschlossen ist, gibt es eine ungerade Lücke um die Höhe von einem   - Das bedeutet, dass nachfolgende Formulare und Seitenelemente nicht mehr an der Stelle angezeigt werden, an der sie sich vor dem Hinweis befanden.

Um es noch einmal zu sagen: Das Ausblenden und Entfernen funktioniert einwandfrei, aber ich möchte, dass die Lücke, die übrig bleibt, ebenfalls verschwindet. Es ist eine Kleinigkeit, aber es ist mir ein Dorn im Auge.

Die jquery:

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

Das Benachrichtigungs-Div wird beim Postback von PHP geschrieben und hat das folgende CSS:

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

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

Das Div ist sehr einfach:

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

Edit: Das umgebende Markup der Seite sieht wie folgt aus:

<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>

Edit: Wenn ich Firebug in FF 3.5.2 verwende, kann ich nicht sehen, dass etwas im Inspektor zurückbleibt. Da ist nur eine merkwürdige Lücke. Ich habe auch einen Screenshot von diesem Phänomen erstellt:

Answer 1

Ohne es selbst gesehen zu haben, würde ich vermuten, dass es sich um ein Artefakt handelt, das entweder #container oder von // more content . $.remove() entfernt das Element buchstäblich aus dem DOM und erzwingt ein Redraw, so dass unter der Annahme, dass es funktioniert (Syntax scheint in Ordnung), ist es sicherlich nicht ein Ergebnis der .success.

Answer 2

Versuchen Sie hide() anstelle von remove?

Answer 3

Ich habe es gelöst, es gab eine <br> Tag, der sich unter meinem Hinweis versteckt hatte und nach dem Ausblenden immer noch vorhanden war.

Um also das erste Element nach dem div auszublenden, änderte ich mein jquery zu:

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

Damit wird das nächste Element im Dom nach dem Selektor entfernt. Aus dem jQuery-Handbuch .