Beispiele für die Verwendung gängiger Spezialeffektmethoden in jquery

Beispiele für die Verwendung gängiger Spezialeffektmethoden in jquery_jquery

WBOY

Freigeben： 2016-05-16 16:51:24

Original

1235 Leute haben es durchsucht

1. jQuery fadeIn() wird zum Einblenden versteckter Elemente verwendet.

Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector) .fadeIn( Geschwindigkeit, Rückruf);

Beispiel:

Code kopierenDer Code lautet wie folgt:

$("button "). click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3 "). fadeIn(3000);
});

2. Die jQuery-Methode fadeOut() wird verwendet, um sichtbare Elemente auszublenden.

Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector) .fadeOut( Geschwindigkeit, Rückruf);

3. Die jQuery-Methode fadeToggle() wechselt zwischen den Methoden fadeIn() und fadeOut().

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:

Code kopieren Der Code lautet wie folgt:

$(selector) .fadeToggle( Geschwindigkeit, Rückruf);

Beispiel: $("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow") ;
$("#div3").fadeToggle(3000);
});

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 (Funktion( ){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

5. Die jQuery-Methode slideDown() wird verwendet, um Elemente nach unten zu schieben.

Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector) .slideDown( speed,callback);

Code kopieren Der Code lautet wie folgt:

$("#flip").click (function( ){
 $("#panel").slideDown();
});

6. Die jQuery-Methode slideUp() wird verwendet, um Elemente nach oben zu schieben.

Syntax:

Code kopieren Der Code lautet wie folgt:

$(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 Rückrufparameter ist der Name der Funktion, die nach Abschluss des Schiebevorgangs ausgeführt werden soll.

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.

Code kopieren Der Code lautet wie folgt:

$(selector).slideToggle(speed, Rückruf);

8. Die jQuery-Methode animate() wird zum Erstellen benutzerdefinierter Animationen verwendet.

Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector) .animate( {params},speed,callback);

Der erforderliche Parameter params definiert die CSS-Eigenschaften, die die Animation bilden.

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

Code kopieren Der Code lautet wie folgt:

$("button" ).click (function(){
 $("div").animate({left:'250px'});
}); 
 

9. Die jQuery-Methode stop() wird verwendet, um Animationen oder Effekte zu stoppen, bevor sie abgeschlossen sind

10. Wenn die Animation zu 100 % abgeschlossen ist, rufen Sie die Callback-Funktion auf.

Typische Syntax:

Code kopieren Der Code lautet wie folgt:

$(selector ). hide(speed,callback)

11. Link zur jQuery-Methode

Einige Elemente müssen nur einmal abgerufen werden, sodass Sie Links zum Anhängen von Methoden verwenden können.

Es ist die Methodenpunktmethode. Beispiel:

Code kopieren Der Code lautet wie folgt:

$("#p1" ).css(" color","red").slideUp(2000).slideDown(2000);