jQuery-Folie ist nervös

Ich habe versucht, einen DIV mit der Umschaltfunktion von jQuery ein- und auszublenden, aber das Ergebnis ist zu Beginn und / oder am Ende der Animation immer unruhig. Hier ist der js-Code, den ich verwende:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

Und das HTML:

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

Sie können das vollständige Beispiel auch hier sehen:jQuery Slide Test

Normalerweise benutze ich Mootools und ich kann diese Folie ohne Probleme damit machen. Aber ich starte ein neues Projekt in Django und die meisten Apps in Django verwenden jQuery. Also dafür und nach dem LesenjQuery vs Mootools Ich habe beschlossen, dass dies eine gute Gelegenheit sein wird, jQuery zu verwenden. Mein erstes Bedürfnis war es also, diesen DIV zu schieben. Und es hat nicht richtig funktioniert.

Ich habe mehr gesucht und festgestellt, dass dies ein alter Fehler in jQuery ist, bei dem Rand und Abstand auf den DIV angewendet wurden. Die Lösung besteht darin, den DIV in einen anderen DIV einzuwickeln. Es hat das Problem in meinem Fall nicht behoben.

Auf der Suche weiter fand ich diesen BeitragSlidedown Animation überarbeitet. Es repariert einen Sprung an einem Ende, aber nicht am anderen (Test2 imjQuery Slide Test).

Beim Stack Overflow habe ich das gefundenjQuery IE ruckelt Folienanimation. In den Kommentaren habe ich gesehen, dass das Problem mit dem P-Tag in der DIV ist. Wenn ich die P-Tags durch DIV-Tags ersetze, die das Problem beheben, ist dies keine richtige Lösung.

Endlich habe ich das gefundenWeird jQuery Verhalten Folie. Als ich es las, verstand ich, dass das Problem, das durch den Wechsel von P-Tag zu DIV gelöst wurde, in den Rändern des P (nicht in der DIV vorhanden) und dem Zusammenfallen der Ränder zwischen Elementen bestand. Wenn ich also die Ränder auf Auffüllungen ändere, wird das Problem behoben. Aber ich verliere das Einklappverhalten von Rändern und kollabiere das, was ich will.

Ehrlich gesagt kann ich sagen, dass meine ersten Erfahrungen mit jQuery nicht wirklich gut sind. Wenn ich einen der einfachsten Effekte in jQuery verwenden möchte, muss ich nicht die richtige Funktion verwenden (slideToggle), sondern einen handgemachten Code verwenden UND den DIV in einen anderen DIV einwickeln UND die Ränder auf Füllungen umschalten, wodurch mein Layout durcheinander gebracht wird.

Habe ich eine einfachere Lösung verpasst?

Wie von krdluzni vorgeschlagen, habe ich versucht, mit der Methode animate ein benutzerdefiniertes Skript zu schreiben. Hier ist mein Code:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Aber das funktioniert auch nicht, weil jQuery den Überlauf immer am Ende der Animation sichtbar macht. Der DIV wird also am Ende der Animation erneut angezeigt, der Rest des Inhalts jedoch überlagert.

Ich habe es auch mit UI.Slide (und Scale and Size) versucht. Es funktioniert, aber der Inhalt unter dem DIV bewegt sich nicht mit der Animation. Es wird nur am Ende / Anfang der Animation gesprungen, um die Lücke zu füllen. Ich will das nicht.

AKTUALISIEREN:

Ein Teil der Lösung besteht darin, die Höhe des Containers DIV vor allem dynamisch festzulegen. Damit löst man Sprünge. Aber nicht die einzige Ursache dafür, dass der Spielraum zusammenbricht. Hier ist der Code:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

ZWEITES UPDATE:

Sie können den Fehler auf der eigenen jQuery-Site auf dieser Seite sehen (Beispiel B):Tutorials: Live-Beispiele für jQuery

DRITTES UPDATE:

Versucht mit jQuery 1.4, keine Chance mehr :-(

Antworten auf die Frage(28)

Ihre Antwort auf die Frage