jQuery und Animationen
jQuery und Animationen
jQuery und Animationen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
In diesem Abschnitt lernen wir Animationen mit jQuery kennen.
Beginnen wir.
show- und hide-Methode
show()- und hide()-Methoden
Mit den Methoden show und hide können wir ein DOM-Objekt auf dem Bildschirm ein- und ausblenden.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>toggle-Methode
toggle()-Methode
Zusätzlich gibt es die toggle()-Methode, deren Funktion sich bereits aus ihrem Namen ableiten lässt. Mit dieser Methode wird ein ausgeblendetes Element eingeblendet und ein eingeblendetes Element ausgeblendet.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadeIn und fadeOut
fadeIn()- und fadeOut()-Methoden
Sehen wir uns nun die fadeIn- und fadeOut-Methoden an, mit denen HTML-Elemente animiert ein- und ausgeblendet werden.
Die fadeIn- und fadeOut-Methode erwartet optional einen Zahlenwert in Millisekunden. Der Wert bestimmt, wie viele Millisekunden die Animation dauert. Wenn wir kein Argument übergeben, wird der Standardwert verwendet.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadeIn und fadeOut
fadeOut verringert die Opazität von Elementen über einen bestimmten Zeitraum. Wenn die Opazität 0 beträgt, wird die display-Eigenschaft auf none gesetzt.
Es handelt sich um die zuvor gelernte hide()-Methode, ergänzt um eine Opazitätsanimation.
FadeIn ist das Gegenstück zur fadeOut-Methode.
fadeToggle-Methode
fadeToggle()-Methode
Die fadeToggle()-Methode ähnelt der toggle()-Methode. Ist das Element ausgeblendet, wird es eingeblendet. Ist es eingeblendet, wird es ausgeblendet – und wie Sie sich denken können, geschieht dies animiert.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>CSS-Animation
CSS-Animationen
Animationen werden in jQuery mit der animate()-Methode ausgeführt. Diese Methode erwartet ein JSON-Argument. Darin legen wir fest, welche CSS-Eigenschaften des Zielelements geändert werden.
Der zweite Parameter ist die Animationsdauer in Millisekunden (dieser Parameter ist optional).
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Ereignishandler für Animationen
Ereignishandler für Animationen
Das letzte Argument, das wir der animate-Methode übergeben können, ist der Ereignishandler, den wir ausführen können, wenn die Animation endet.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>Relative Animation
Erwähnen wir noch eine kleine Vereinfachung bei Animationen.
Den in Animationen verwendeten Eigenschaften können relative Werte zugewiesen werden, anstatt absolute Werte zu übergeben.
Das folgende Beispiel macht dies verständlicher.
Während der Animation wurden 100px zur top-Eigenschaft des betreffenden Zielelements addiert.
$("button").animate({
top: "+=100px",
});Animation stoppen
Animation stoppen
Um eine aktuell laufende Animation zu stoppen, genügt es, das Ziel auszuwählen, für das die Animation definiert ist, und die stop()-Methode zu verwenden.
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Vorgefertigte Methoden
Vorgefertigte Methoden
Wir können Animationen erstellen, indem wir benutzerdefinierte CSS-Eigenschaften mit jQuery definieren, oder vorgefertigte Methoden von jQuery verwenden.
Sehen wir uns den folgenden Code an.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");Dauer einer relativen Animation
Wie bei anderen Animationsmethoden müssen wir in dieser Methode die Dauer als erstes Argument übergeben, wenn wir die Animationsdauer festlegen möchten.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");Ereignishandler
Das Letzte, was ich Ihnen über Slide-Animationen erzählen möchte. Hm, ich glaube, das habe ich vergessen.
Wie bei der animate-Methode (um einen Ereignishandler zu definieren, der nach Abschluss der Animation ausgeführt wird) können wir den oben genannten Methoden als zweites Argument eine anonyme Funktion übergeben.
setTimeout(function() {
//Call when animation is completed
}, 1000);Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
Wir haben jQuery und Animationen gelernt.
Im nächsten Abschnitt lernen wir die AJAX-Operationen kennen.
Häufig gestellte Fragen
Ist die Lektion „jQuery und Animationen“ kostenlos?
Ja — der vollständige Text von „jQuery und Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „jQuery und Animationen“?
jQuery und Animationen Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „jQuery und Animationen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.