Beispiel-Tutorial zur Animation in JQuery

jQuery-Animation

1. Zoomeffekt in der oberen linken Ecke

hide([speed,[fn]])

Übersicht: Angezeigte Elemente ausblenden

Parameter: Geschwindigkeit: eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer angibt (z. B. 1000)

fn : in Funktion, die einmal pro Element ausgeführt wird, wenn die Animation abgeschlossen ist.

// $(":button[value=hide]").click(function(){
// $("div").hide(2000,function(){
// alarm("div ist ausgeblendet");
// });
// })

show([speed,[fn]])

　Übersicht: Versteckte passende Elemente anzeigen.

// $(":button[value=show]").click(function(){
// $("div").show(2000,function(){
// alarm("div wird angezeigt");
// });
// })

toggle([speed],[fn])

　Übersicht: Wenn das Element sichtbar ist, schalten Sie es auf „Ausgeblendet“ um. Wenn das Element ausgeblendet ist, schalten Sie es auf „Sichtbar“ um.

// //toggle([speed],[fn]) Wenn das Element sichtbar ist, wechseln Sie zu versteckt; wenn das Element ausgeblendet ist, wechseln Sie zu sichtbar
// $(": button[ value=hidden]").click(function(){
// $("div").toggle(2000);
// })

2. Skalierungseffekt nach oben und unten

slideUp(speed, [callback])

Übersicht: Alle Übereinstimmungen durch Höhenänderungen (nach oben abnehmend) ausblenden, optional Auslösen eines Rückruffunktion nach Abschluss des Ausblendens.

Parameter: Geschwindigkeit Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer angibt (z. B. 1000), Rückruf (optional) in Funktion wird ausgeführt, wenn die Animation abgeschlossen ist

//slideUp(speed, [fn]) verbirgt alle passenden Elemente dynamisch durch Höhenänderungen (nach oben abnehmend) und löst optional eine Callback-Funktion aus, nachdem das Ausblenden abgeschlossen ist
/ / $(":button[value=hide]").click(function(){
// $("div").slideUp(2000);
// })

slideDown(speed, [callback])

Übersicht: Alle passenden Elemente durch Höhenänderungen dynamisch anzeigen (nach unten erhöhen) und optional eine Rückruffunktion auslösen, nachdem die Anzeige abgeschlossen ist.

// //slideDown(speed, [fn]) zeigt alle passenden Elemente dynamisch durch Höhenänderungen an (zunehmend nach unten) und löst optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist
// $(" :button[value=display]").click(function(){
// $("div").slideDown(2000);
// })

slideToggle([speed ],[fn])
Übersicht: Schalten Sie die Sichtbarkeit aller übereinstimmenden Elemente durch Höhenänderungen um und lösen Sie optional eine Rückruffunktion aus, nachdem der Wechsel abgeschlossen ist.

//slideToggle([speed],[fn]) Schaltet die Sichtbarkeit aller übereinstimmenden Elemente durch Höhenänderungen um und löst optional eine Rückruffunktion aus, nachdem der Wechsel abgeschlossen ist
// $(" :button [value=hidden]").click(function(){
// $("div").slideToggle(2000);
// })

3. Fade-Effekt (Änderung der Deckkraft)

fadeOut(speed, [callback])

Übersicht: Alle werden durch Änderungen der Deckkraft erreicht. Entspricht dem Ausblenden des Elements Effekt und löst optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.

// $(":button[value=hide]").click(function(){
// $("div").fadeOut(2000);
// } )

fadeIn(speed, [callback])

Übersicht: Erzielen Sie den Einblendeffekt aller passenden Elemente durch Änderungen der Deckkraft und lösen Sie optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.

$(":button[value=display]").click(function(){
// $("div").fadeIn(2000);
// })

fadeToggle([speed,[fn]])

Übersicht: Schalten Sie die Ein- und Ausblendeffekte aller passenden Elemente durch Änderungen der Deckkraft um und lösen Sie optional einen Rückruf nach der Animation aus ist abgeschlossene Funktion.

$(":button[value=hidden]").click(function(){
// $("div").fadeToggle(2000);
// })

fadeTo(speed,opacity,[fn])

Übersicht: Passen Sie die Deckkraft aller passenden Elemente schrittweise an die angegebene Deckkraft an und lösen Sie optional nach Abschluss der Animation eine Rückruffunktion aus.

// $(":button[value=hide]").click(function(){
// $("div").fadeTo(2000,0.5);
/ / })

4. Benutzerdefinierte Animation

animate(params,[speed],[fn])

Übersicht : Funktionen zum Erstellen benutzerdefinierter Animationen.

// $("div").animate({"left":"1000px"},2000);

stop([clearQueue], [gotoEnd ])

Übersicht: Stoppt alle Animationen, die auf dem angegebenen Element ausgeführt werden.

Parameter: clearQueue (optional) Wenn auf true gesetzt, wird die Warteschlange geleert. Die Animation kann sofort beendet werden.

gotoEnd (optional) ermöglicht den sofortigen Abschluss der aktuell ausgeführten Animation.

// $(document).click(function(){
// $("div").stop()
// })

Verzögerung (Dauer)

Übersicht: Legen Sie eine Verzögerung fest, um die Ausführung nachfolgender Elemente in der Warteschlange zu verzögern.

　Parameterdauer Verzögerungszeit, Einheit: Millisekunden

// $("div").delay(2000).animate({"left":"1000px"},2000

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Animation in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!