Ich versuche, die eingebaute Funktion von jQuery zu verwenden, um eine "Schublade" zu erstellen, die hinter einer Navigationsleiste hervorragt und den darunter liegenden Inhalt aus dem Weg räumt.
Wenn ich $('#drawer').slideDown() verwende, wird der Inhalt aus dem Weg geschoben, aber der Inhalt "rutscht" nicht herunter. Es ist mehr eine Wipe, um den Inhalt zu zeigen.
Wenn ich $('#drawer').show('slide',{direction:'up'}) verwende, gleitet der Inhalt korrekt nach unten, aber der gesamte Inhalt unter dem Element springt aus dem Weg, bevor der Effekt auftritt.
Gibt es eine Möglichkeit, das Beste aus beiden zu kombinieren, um den Effekt zu reproduzieren, nach dem ich suche: eine Schublade, die herausgleitet und den darunter liegenden Inhalt aus dem Weg räumt?
Ich habe die .animate() -Funktion von jQuery UI untersucht, aber die Dokumentation ist nicht hilfreich. Meine groben Bemühungen, es zu nutzen, waren voller Versagen.
Und falls jemand fragt, tut mir leid, ich kann kein Beispiel zeigen, aber wir möchten, dass es wie das jQuery Drawer-Plugin funktioniert:
Aber dieses Plugin tut nicht ganz das, was wir brauchen, sonst würde ich es einfach benutzen (keine Aufzählungsliste oder AJAX-Inhalt). Die Wirkung dort ist jedoch, was wir wollen.
UPDATE: Ich habe diesen Teil des Codes auch über das jQuery Drawer-Plugin ausprobiert, aber er animiert überhaupt nicht:
%Vor% Auch dies wird innerhalb einer Funktion OpenDrawer() , die so genannt wird, aufgerufen:
Da es standardmäßig geladen wird, wenn die Seite geladen wird.
Ich glaube, Sie suchen nach einem Effekt, der mehr wie 'blind' aussieht:
%Vor%Es ist seltsam, dass $ .fn.slideDown () und $ .fn.show ('slide') nicht genauso funktionieren, sondern "blind". "Folie" erstellt einen Platzhalter, der die Größe Ihres Objekts hat, und gleitet dann in den Bildausschnitt, während blind die Höhe oder Breite Ihres Elements anpasst, bis es auf die richtige Größe erweitert wird (während der Überlauf auf "Versteckt" eingestellt ist). Eigentlich sind die Effektnamen korrekt, aber wegen des Legacy-Namens $ .fn.slideDown ().
gibt es etwas VerwirrungEs ist ein später Beitrag, aber ich bin auf dieses Problem gestoßen und habe etwas geschafft, das funktioniert.
Ich bin kein jQuery oder Javascript Guru, also seien Sie nicht hart mit dieser schnellen Lösung.
Hier ist ein kleines Beispiel. Die Reihenfolge der Auswirkungen muss respektiert werden. Sie können mit der Animationszeitlänge spielen, um einen wirklich schönen Zeichnungseffekt zu haben.
Ich habe es gerade auf FF 3.6
getestetSie können das Beispiel auf dem Google Code-Spielplatz ausprobieren. Ссылка
Klicken Sie auf HTML bearbeiten, fügen Sie den Code ein und klicken Sie auf Ausführen. Das Beispiel sollte funktionieren
Ich hoffe, es wird dir helfen
%Vor%Das JavaScript, das Sie in Ihrem Fragenupdate haben, funktioniert, aber es muss mit einem Element arbeiten, das Ihren Inhalt und nicht den Inhalt selbst enthält.
Um dies in Aktion zu sehen, umgeben Sie das Element #drawer mit einem anderen div :
Und animiere den Container:
%Vor%Ja, es ist wie das Akkordeon-Verhalten, außer dass du es auch hochschieben kannst. Ich habe diese Funktionalität verwendet, um das zu erstellen, wonach Sie suchen.
$('#drawer').slideDown('slow');
Wenn Sie die Geschwindigkeit ändern, können Sie verschiedene Geschwindigkeiten erreichen, die Ihren Vorstellungen entsprechen. Nun, obwohl Sie das Schubladenelement haben, benötigen Sie einen Container, der zunächst verborgen ist, was gleitet. Nehmen wir an, Sie haben einen Button mit der ID "drawer" und einen Container mit der ID "myDrawerContent". Sie würden Folgendes tun,
%Vor% %Vor%Hoffe, das hilft.
Metropole
Ich habe nach einer vernünftigen Umsetzung dieses (scheinbar einfachen) Effekts gesucht, und das ist das Beste, was ich gefunden habe: Ссылка
Siehe hier für weitere Informationen / code / etc: Ссылка
Allerdings scheint es immer noch übertrieben zu sein und muss in ein blankes Essenz-Animations-Plugin umgewandelt werden, das über .show () aufgerufen / angewendet werden kann, was genau das ist, was Sie bereits in jQuery / UI erwarten würden Standard an erster Stelle ... aber leider nicht ...
Tags und Links javascript jquery jquery-ui