eins. Zeigen, verstecken
Die Anzeigemethode in JQuery lautet: .show () und die versteckte Methode ist: .hide (). Wenn es keine Parameter gibt, ist es nur schwierig, den Inhalt anzuzeigen und zu verbergen.
$ ('. show'). click (function () {// Setzen Sie Trigger -Ereignisse $ ('#box'). show (); // show}); $ ('. hide'). click (function () {// Setzen Sie Trigger -Ereignisse $ ('#box'). hide (); // hide});In den Methoden .show () und .hide () kann ein Parameter übergeben werden, der die Geschwindigkeit in Millisekunden steuert (1000 Millisekunden entspricht 1 Sekunde). Es ist auch reich an konstanter Geschwindigkeit, um zu erhöhen und zu verringern, sowie die Transparenzänderung.
$ ('. show'). click (function () {$ ('#box'). show (1000); // Es dauerte 1 Sekunde, um anzuzeigen}); $ ('. ausblenden'). click (function () {$ ('#box'). ausblenden (1000); // Es dauerte 1 Sekunde, um sich zu verstecken});JQuery verwendet nicht nur Millisekunden direkt zur Steuergeschwindigkeit, sondern bietet auch drei voreingestellte Geschwindigkeitsparameterzeichenfolgen: langsam, normal und schnell, entsprechend 600 Millisekunden, 400 Millisekunden bzw. 200 Millisekunden.
$ ('#Box'). Show ('langsam'); // 600 Millisekunden $ ('#box'). Show ('normal'); // 400 Millisekunden $ ('#Box'). Show ('Fast'); // 200 MillisekundenHINWEIS: Unabhängig davon, ob Millisekunden übergeben oder voreingestellte Zeichenfolgen übergeben werden, wenn Sie versehentlich einen Fehler übergeben oder eine leere Zeichenfolge übergeben. Dann dauert es den Standardwert: 400 Millisekunden.
Verwenden Sie die Rückruffunktionen von .Show () und .hide (), um Animationseffekte der Warteschlangen zu erzielen.
(1) Rufen Sie sich mit dem Funktionsnamen an
$ ('. show'). click (function () {$ ('#box'). show ('langsam', function ShowSpan () {$ (this) .Next (). show ('langsam', showSpan);});})(2) Verwenden Sie Argumente.Callee, um anonyme Funktionen aufzurufen
$ ('. show'). click (function () {$ ('#box'). show ('langsam', function () {$ (this) .Next (). Show ('Slow', Argumente.Callee);});})Wenn wir .show () und .hide () verwenden, müssen wir, wenn wir einen Knopf zum Wechseln benötigen, einige bedingte Urteile vornehmen. Und JQuery bietet uns eine separate Methode mit ähnlichen Funktionen: .Toggle ().
$ ('. Toggle'). click (function () {$ (this) .toggle ('langsam');});zwei. Slide and Scroll JQuery bietet eine Reihe von Methoden, um die Höhe der Elemente zu ändern: .Slideup (), .Slidedown () und .slidetoggle (). Wie der Name schon sagt, schrumpfen Sie nach oben (Scrollen) und erweitert sich nach unten (Folien).
$ ('. Down'). click (function () {// Swipe $ ('#box').HINWEIS: Die Gleit- und Scrolling -Effekte entsprechen den Auswirkungen und versteckten Effekten und haben die gleichen Parameter.
drei. Verblassen, verblassen
JQuery bietet eine Reihe von Methoden speziell für Transparenzänderungen: .fadein () und .fadeout (), die verblüfft und verblassen, und natürlich gibt es auch eine automatische Schaltmethode: .fadetoggle ().
$ ('. in'). click (function () {// fake in $ ('#box'). fadein ('langsam');}); });Die obigen drei Transparenzmethoden können nur zwischen 0 und 100 oder von 100 bis 0 liegen. Wenn wir den angegebenen Wert festlegen möchten, gibt es keine Möglichkeit. JQuery bietet eine .fadeto () -Methode zur Lösung dieses Problems.
$ ('. Toggle'). Click (function () {$ ('#box'). fadeto ('langsam', 0,33); //0.33 bedeutet, dass der Wert 33%});PS: Die Anzahl der Werte beträgt 0 bis 1, was dem Prozentsatz entspricht
Vier. Benutzerdefinierte Animation
JQuery bietet mehrere einfache und häufig verwendete feste Animationsaspekte, die wir verwenden. Aber manchmal können diese einfachen Animationen unsere komplexeren Bedürfnisse nicht erfüllen. Zu diesem Zeitpunkt bietet JQuery eine .animate () -Methode, um unsere benutzerdefinierten Animationen zu erstellen, um komplexere und veränderliche Anforderungen zu erfüllen.
$ ('. Animate'). click (function () {$ ('#box'). animim ({'width': '300px', 'fontsize': '50px', 'opacity': 0.5});});Hinweis: Eine CSS -Änderung ist ein Animationseffekt. Im obigen Beispiel gibt es bereits vier CSS -Änderungen, und der Effekt der synchronen Bewegung mehrerer Animationen wurde erreicht.
Es gibt nur einen Parameter, der übergeben werden muss, was ein Objekt mit einem CSS-Stil von Schlüsselwertpaaren ist. Es gibt zwei optionale Parameter, nämlich die Geschwindigkeits- und Rückruffunktionen.
$ ('. Animate'). click (function () {$ ('#box'). Animate ({'width': '500px', 'Höhe': '400px',}, 2000, function () {alert ('Ausführung abgeschlossen');});});Bisher haben wir Animationen mit festen Positionen erstellt, die noch sind. Wenn Sie Bitbewegungsbilder in Bewegungszuständen implementieren möchten, müssen Sie benutzerdefinierte Animationen verwenden und sie mit der absoluten Positionierungsfunktion von CSS kombinieren.
$ ('. Animate'). click (function () {$ ('#box'). Animate ({'top': '300px', // Die absolute Positionierung von CSS muss zuerst 'links': '200px'}) festgelegt werden;PS: Das Referenzobjekt muss zuerst in CSS und die absolute Positionierung festgelegt werden
Bei der benutzerdefinierten Animation muss jede Startbewegung in der Anfangsposition oder im Ausgangszustand liegen, und manchmal möchten wir sie über die aktuelle Position oder den aktuellen Zustand animieren. JQuery bietet die Funktionen des Hinzufügens und Verringerns benutzerdefinierter Animationen.
$ ('. Animate'). click (function () {$ ('#box'). Animate ({links: '+= 100px', width: '+= 100px', Höhe: '+= 100px'});});fünf. Warteschlangenanimationsmethode
Wir können bereits schon einmal Warteschlangenanimation implementieren. Wenn es das gleiche Element ist, kann es in Sequenz aufgerufen oder verkettet werden. Wenn es sich um ein anderes Element handelt, können Sie die Rückruffunktion verwenden. Aber manchmal gibt es zu viele Warteschlangenanimationen, und die Lesbarkeit der Rückruffunktion wird stark reduziert. Zu diesem Zweck bietet JQuery eine Reihe von Methoden, die speziell für Animationen in der Warteschlange verwendet werden.
// Verbundenes kann nicht in der Sequenzwarteschlange implementiert werden
$ ('#box'). SlideUp ('langsam').
HINWEIS: Wenn die Animationsmethode animiert ist, kann die Ligatur nacheinander in die Warteschlange gestellt werden, während die .css () -Methode keine Animationsmethode ist und vor der ersten Übergabe der Warteschlange ist. Anschließend kann die Animationsmethode -Rückruffunktion verwendet werden, um das Problem zu lösen.
// Verwenden Sie die Rückruffunktion, um die Warteschlange der .css () -Methode zu.
Wenn dies jedoch der Fall ist, nimmt die Lesbarkeit nicht nur ab, wenn es viele Animationen in der Warteschlange gibt, sondern die ursprüngliche Animationsmethode ist nicht klar genug. Unsere Idee ist also, dass jede Operation eine eigene unabhängige Methode ist. Dann bietet JQuery eine Methode, die einer Rückruffunktion ähnelt: .queue ().
// Verwenden Sie die.
Jetzt möchten wir der Methode .queue () weiterhin eine versteckte Animation hinzufügen, aber wir fanden heraus, dass es unmöglich war, sie zu implementieren. Dies wird durch die Funktion .queue () verursacht. Lösung: Die Rückruffunktion von JQuery's .queue () kann einen Parameter übergeben, der die nächste Funktion ist. Rufen Sie diese als nächste () Methode am Ende an, um die Warteschlangenanimation auszuführen.
// Verwenden Sie den nächsten Parameter, um die Animation der kontinuierlichen Anrufwarteschlange zu implementieren $ ('#Box'). SlideUp ('langsam').PS: .Queue () -Methode hat auch eine andere Funktion, die die Länge der aktuellen Animationswarteschlange erhalten soll (nicht im Detail demonstriert)
JQuery bietet auch eine funktionale Methode zum Aufräumen von Warteschlangen: .Clearqueue (). Setzen Sie es in eine in der Warteschlange zurückgezogene Funktion oder.
// Die Animationswarteschlange $ ('#box'). sechs. Animations-bezogene Methoden
Oft ist es notwendig, die Ausführung von Animationen einzustellen, und JQuery bietet dafür eine .stop () -Methode. Es hat zwei optionale Parameter: .Stop (ClearQueue, Gotoend); ClearQueue gibt einen booleschen Wert, der darstellt, ob die unerkannte Animationswarteschlange gelöscht werden soll, und Gotoend gibt an, ob die ausführende Animation direkt in den letzten Zustand springen soll.
$ ('. Animate'). click (function () {$ ('#box'). Animate ({'links': '300px'}, 1000); $ ('#box'). Animate ({'Höhe': '300px'}, 1000); $ ('. STOP'). click (function () {$ ('#box'). stop (true, false);});// Hinweis: Der erste Parameter gibt an, ob die Warteschlangenanimation abgesagt werden soll, Standard ist falsch. Wenn der Parameter wahr ist, wird die nachfolgende Warteschlangeanimation abgebrochen, wenn eine Warteschlangenanimation vorliegt. Der zweite Parameter zeigt an, ob er das Ende der aktuellen Animation erreicht, und der Standard ist falsch. Wenn der Parameter wahr ist, erreicht er das Ende sofort nach dem Stoppen. Sie können es selbst kopieren und erleben.
Manchmal gibt es bei der Ausführung von Animationen oder Animationen in der Warteschlange eine Verzögerung vor der Bewegung, und JQuery bietet die .delay () -Methode dafür. Diese Methode kann eine Verzögerung vor der Animation festlegen oder in der Mitte der Animation in der Warteschlange hinzufügen.
// Die Startverzögerung beträgt 1 Sekunde, die mittlere Verzögerung ist 1 Sekunde. 'width': '300px'}, 1000);
Argumente.Callee wird ausgeführt, in welcher Funktion es repräsentiert, welche Funktion. Im Allgemeinen in anonymen Funktionen verwendet. In anonymen Funktionen müssen Sie sich manchmal anrufen, aber weil es sich um eine anonyme Funktion handelt, hat es keinen Namen und ist einstellbar. Zu diesem Zeitpunkt können Argumente.Callee anstelle von anonymen Funktionen verwendet werden
// rekursiv Selbst ausführen, Infinite Loop $ ('#box'). Slidetoggle ('langsam', function () {$ (this) .Slidetoggle ('langsam', argumente.callee);});Die $ .fx.off -Eigenschaft kann alle Animationseffekte deaktivieren.
$ .fx.off = true; // Standard ist falsch
Alle werden verstanden.
Das obige ist die von dem Editor vorgelegte jQuery -Animationseffektcode -Code -Freigabe. Ich hoffe, es wird Ihnen hilfreich sein.