In diesem Artikel wurden einige häufig verwendete Spezialeffektbeispiele zusammengestellt, wie zum Beispiel: .jQuery fadeIn() wird zum Einblenden versteckter Elemente verwendet. Die jQuery-Methode fadeToggle() kann zwischen fadeIn() verwendet werden. und fadeOut()-Methoden. Interessierte Freunde können sich zum Umschalten usw. auf Folgendes beziehen:
1.jQuery fadeIn() wird zum Einblenden versteckter Elemente verwendet.
Syntax:
$(selector).fadeIn(speed,callback);
Beispiel:
Code kopieren Der Code lautet wie folgt:
$("button").click(function(){ $("#p1").fadeIn(); $("#p2").fadeIn("slow"); $(" #p3" ).fadeIn(3000);});
2.jQuery fadeOut() Methode wird verwendet, um sichtbare Elemente auszublenden.
Syntax:
$(selector).fadeOut(speed,callback);
3.jQuery fadeToggle() Methode kann zwischen fadeIn() und fadeOut() Methoden wechseln.
fadeToggle() fügt dem Element einen Einblendeffekt hinzu, wenn es bereits ausgeblendet ist.
Wenn das Element bereits eingeblendet ist, fügt fadeToggle() dem Element einen Ausblendeffekt hinzu.
Syntax:
$(selector).fadeToggle(speed,callback);
Beispiel:
Code kopieren Der Code lautet wie folgt:
$("button").click(function(){ $("#p1").fadeToggle(); $("#p2").fadeToggle("slow"); $(" #p3" ).fadeToggle(3000);});
Hier möchte ich sagen, dass jquery im Allgemeinen eine Negation und eine reversible Methode hat, um die Synthese einer einzelnen Methode zu erreichen. Das Gleiche gilt für die Bewegung unten auf und ab.
4. Syntax:
$(selector).fadeTo(speed,opacity,callback);
Der erforderliche Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden.
Der erforderliche Opazitätsparameter in der fadeTo()-Methode legt den Fade-Effekt auf die angegebene Opazität (einen Wert zwischen 0 und 1) fest. Beispiel
Code kopieren Der Code lautet wie folgt:
$("button").click(function(){
$ ("# p1").fadeTo("slow",0.15);
$("#p2").fadeTo("slow",0.4);
$("#p3").fadeTo(" slow", 0.7);
});
5. Die jQuery-Methode slideDown() wird verwendet, um Elemente nach unten zu schieben.
Syntax:
$(selector).slideDown(speed,callback);
$("#flip").click(function(){ $("#panel").slideDown();} );
6.jQuerys slideUp()-Methode wird verwendet, um Elemente nach oben zu schieben.
Syntax:
$(selector).slideUp(speed,callback);
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden.
Der optionale Callback-Parameter ist der Name der Funktion , die nach Abschluss der Folie ausgeführt wird.
7. Die jQuery-Methode slideToggle() kann zwischen den Methoden slideDown() und slideUp() wechseln.
Wenn Elemente nach unten rutschen, verschiebt slideToggle() sie nach oben.
Wenn Elemente nach oben gleiten, werden sie von slideToggle() nach unten verschoben.
$(selector).slideToggle(speed,callback);
8.jQuery animate() Methode wird verwendet, um eine benutzerdefinierte Animation zu erstellen.
Syntax:
$(selector).animate({params},speed,callback);
Der erforderliche Parameter params definiert die CSS-Eigenschaft, die die Animation bildet.
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden.
Der optionale Callback-Parameter ist der Name der Funktion, die nach Abschluss der Animation ausgeführt werden soll.
Es ist auch möglich, relative Werte zu definieren (der Wert ist relativ zum aktuellen Wert des Elements). Sie müssen += oder -= vor dem Wert hinzufügen:
Sie können auch eine Gruppe von Animationen definieren, um die Funktion Warteschlange zu implementieren.
Das folgende Beispiel zeigt eine einfache Anwendung der animate()-Methode; sie verschiebt das
-Element nach links, bis das linke Attribut 250 Pixel beträgt:
Beispiel
Kopieren Sie den Code Der Code lautet wie folgt:
$("button").click(function(){ $("p").animate({left: '250px'});}) ;
9. Die jQuery-Stopp()-Methode wird verwendet, um Animationen oder Effekte zu stoppen, bevor sie abgeschlossen sind Wenn die Animation zu 100 % abgeschlossen ist, wird die Callback-Funktion aufgerufen.
Typische Syntax:
$(selector).hide(speed,callback)
11.jQuery-Methodenlink
Einige Elemente müssen nur einmal abgerufen werden, sodass Sie den Link zu verwenden können Hängen Sie die Methode an.
Es ist die Methodenpunktmethode. Zum Beispiel
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Das obige ist der detaillierte Inhalt vonEinige gängige Spezialeffektmethoden und Anwendungsbeispiele, die JQuery kennen muss (organisiert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
