In diesem Artikel werden wir sehen, wie Sie verschiedene JQuery-Methoden zum Generieren von Animationen verwenden.
hide() Und show()Die Methode hide() setzt einfach den Stil inline display: none für ausgewählte Artikel. Umgekehrt stellt die Methode show() die Anzeigeeigenschaften wieder her.
Sehen wir uns ein Beispiel an:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Im ersten Fall wird der Absatz ausgeblendet, wenn Sie auf die Schaltfläche klicken (hide-btn), im zweiten Fall wird der Absatz angezeigt, wenn Sie auf die Schaltfläche klicken (show-btn).
Sie können auch den Dauerparameter angeben, um den Ein- und Ausblenden-Effekt für einen bestimmten Zeitraum zu animieren.
Die Dauer kann mithilfe einer der Vorzeichenfolgen angegeben werdendefiNite 'slow' o 'fast', oder in einigen Millisekunden für eine höhere Genauigkeit; höhere Werte zeigen langsamere Animationen an.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>Die Zeichenfolge predefinita 'fast' gibt eine Dauer von 200 Millisekunden an, während die Zeichenfolge 'slow' gibt die Dauer von 600 Millisekunden an.
Wir können eine Funktion von angeben callback nach Abschluss der Methode auszuführen show() oder die ' hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Die jQuery-Methode toggle() Elemente so anzeigen oder verbergen, dass das ursprünglich angezeigte Element ausgeblendet wird; umgekehrt, wenn es ausgeblendet ist, wird es angezeigt (schaltet praktisch seine Sichtbarkeit um).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Ebenso können Sie den Parameter angeben duration für die Methode toggle(), um den Übergang zwischen sichtbar und unsichtbar wie Methoden zu animieren show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>Auf ähnliche Weise können Sie auch eine Funktion von angeben callback für die Methode toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Sie können jQuery-Methoden verwenden fadeIn()e fadeOut() um HTML-Elemente ein- oder auszublenden, ihre Deckkraft schrittweise zu erhöhen oder zu verringern und einen Verblassungseffekt zu erzeugen.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Wie bei anderen jQuery-Effektmethoden können Sie optional Dauer- oder Geschwindigkeitsparameter für Methoden angeben fadeIn()e fadeOut(), um die Dauer des Fades zu steuern. Die Dauer kann mithilfe einer der Vorzeichenfolgen angegeben werdendefiNite 'slow' o 'fast', oder in einer Anzahl von Millisekunden; höhere Werte zeigen langsamere Animationen an.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>die Wirkung der Methoden fadeIn() / fadeOut() es ist ähnlich show() / hide(), aber im Gegensatz zu den Methoden show() / hide(), animieren erstere nur die Deckkraft der Zielelemente und animieren nicht ihre Größe.
Sie können auch eine Funktion von angeben callback ausgeführt werden, nachdem die Methoden abgeschlossen sind fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Die jQuery-Methode fadeToggle() zeigt ausgewählte Elemente an oder blendet sie aus, indem ihre Deckkraft so animiert wird, dass das Element, wenn es anfänglich angezeigt wird, ausgeblendet wird; Wenn es ausgeblendet war, wird es ausgeblendet (dh der Fade-Effekt wird umgeschaltet).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Sie können auch den Lebensdauerparameter für die Methode angeben fadeToggle() was die methoden angeht fadeIn() / fadeOut(), um die Dauer oder Geschwindigkeit der Fade-Animation zu steuern.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Die Methode fadeToggle() hat auch die Möglichkeit, eine Funktion anzugeben callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Die jQuery-Methode fadeTo() es ist ähnlich wie bei der Methode fadeIn(), aber anders als die Methode fadeIn(), die Methode fadeTo() können Sie Elemente bis zu einer bestimmten Deckkraft mischen.
$(selector).fadeTo(speed, opacity, callback);Der erforderliche Parameter opacity gibt die endgültige Deckkraft der Zielelemente an, die eine Zahl zwischen 0 und 1 sein kann. Der Parameter duration o speed es wird auch für diese Methode benötigt, die die Dauer der Animationsblende angibt.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Die jQuery-Methode slideUp() e slideDown() werden verwendet, um HTML-Elemente auszublenden oder anzuzeigen, indem ihre Höhe allmählich verringert oder erhöht wird (d. h. nach oben oder unten gescrollt wird).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Wie bei anderen jQuery-Effektmethoden können Sie optional Dauer- oder Geschwindigkeitsparameter für die Methoden angeben slideUp() e slideDown() um die Dauer der Folienanimation zu steuern. Die Dauer kann mithilfe einer der Vorzeichenfolgen angegeben werdendefiNite 'slow' o 'fast', oder in einer Anzahl von Millisekunden; höhere Werte zeigen langsamere Animationen an.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Sie können auch eine Callback-Funktion angeben, die nach Abschluss der Methode ausgeführt werden soll slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Die jQuery-Methode slideToggle() Ausgewählte Elemente anzeigen oder ausblenden, indem ihre Höhe animiert wird, sodass das Element, wenn es anfänglich angezeigt wird, nach oben gescrollt wird; Wenn es ausgeblendet ist, wird es nach unten gescrollt, d. h. es wird zwischen den Methoden umgeschaltet slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Ebenso können Sie den Lebensdauerparameter für die Methode angeben slideToggle() wie die slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Ebenso können Sie auch eine Callback-Funktion für die Methode angeben slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Die jQuery-Methode animate() Es wird verwendet, um benutzerdefinierte Animationen zu erstellen. Die Methode animate() wird verwendet, um numerische CSS-Eigenschaften zu animieren, wie z width, height, margin, padding, opacity, top, left usw. aber nicht-numerische Eigenschaften wie color o background-color Sie können nicht mit der grundlegenden jQuery-Funktionalität animiert werden.
Die grundlegende Syntax der Methode animate() ist der folgende:
$(selector).animate({ properties }, duration, callback);Methodenparameter animate() haben folgende Bedeutung:
'slow' o 'fast', oder in einer Anzahl von Millisekunden; höhere Werte zeigen langsamere Animationen an.Unten ist ein einfaches Beispiel der Methode animate() die ein Bild von seiner ursprünglichen Position um 300 Pixel nach rechts animiert, wenn Sie auf die Schaltfläche klicken.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Sie können mit der Methode auch mehrere Eigenschaften eines Elements gleichzeitig animieren animate(). Alle Eigenschaften wurden ohne Verzögerung gleichzeitig animiert.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Sie können auch mehrere Eigenschaften eines Elements nacheinander einzeln in einer Warteschlange animieren, indem Sie die Verkettungsfunktion von jQuery verwenden.
Das folgende Beispiel zeigt eine eingereihte oder verkettete jQuery-Animation, bei der jede Animation startet, sobald die vorherige Animation des Elements abgeschlossen ist. Wir werden die Verkettungsfunktion in einem zukünftigen Artikel sehen.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Es ist auch möglich defirelative Werte für animierte Eigenschaften abschließen. Wenn ein Wert mit einem Präfix angegeben wird += o -=, wird der Zielwert berechnet, indem die angegebene Zahl zum aktuellen Wert der Eigenschaft addiert oder subtrahiert wird.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Zusätzlich zu numerischen Werten kann jede Eigenschaft Zeichenfolgen akzeptieren 'show', 'hide' e 'toggle'. Dies ist sehr nützlich in einer Situation, in der Sie die Eigenschaft nur von ihrem aktuellen Wert auf ihren Anfangswert und umgekehrt animieren möchten.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Die jQuery-Methode stop() wird verwendet, um aktuell laufende jQuery-Animationen oder -Effekte auf ausgewählten Elementen vor dem Abschluss zu stoppen.
Die grundlegende Syntax der Methode stop() jQuery kann angegeben werden mit:
$(selector).stop(stopAll, goToEnd);Die Parameter in obiger Syntax haben folgende Bedeutung:
false, das bedeutet, dass nur die aktuelle Animation gestoppt wird, die restlichen Animationen in der Warteschlange werden später ausgeführt.false.Hier ist ein einfaches Beispiel, das die Methode demonstriert stop() in echter Aktion, wo Sie die Animation auf Knopfdruck starten und stoppen können.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Hier ist ein weiteres Beispiel für diese Methode, wenn Sie erneut auf die Schaltfläche klickenSlide Toggle” Nach dem Start der Animation, aber vor deren Abschluss, beginnt die Animation sofort in die entgegengesetzte Richtung vom gespeicherten Startpunkt.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Beim Erstellen des animierten Hover-Effekts ist eines der häufigsten Probleme, auf die Sie stoßen können, dass mehrere Animationen in der Warteschlange stehen, wenn Sie den Mauszeiger schnell platzieren und entfernen. Warum in dieser Situation mouseenter die mouseleave Ereignisse werden schnell ausgelöst, bevor die Animation abgeschlossen ist. Um dieses Problem zu vermeiden und einen schönen und glatten Hover-Effekt zu erzeugen, können Sie hinzufügen stop(true, true)zur Methodenkette, etwa so:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript-Anweisungen werden Zeile für Zeile ausgeführt. Da der jQuery-Effekt jedoch einige Zeit in Anspruch nimmt, wird der Code der nächsten Zeile möglicherweise ausgeführt, während der vorherige Effekt noch ausgeführt wird. Um dies zu verhindern, stellt jQuery für jede Effektmethode eine Callback-Funktion bereit.
Eine Callback-Funktion ist eine Funktion, die ausgeführt wird, sobald der Effekt abgeschlossen ist. Die Rückruffunktion wird als Argument an die Methoden des Effekts übergeben, und sie erscheinen normalerweise als letztes Methodenargument. Zum Beispiel die grundlegende Syntax der jQuery-Effektmethode slideToggle() mit einer Callback-Funktion, die wie folgt angegeben werden kann:
$(selector).slideToggle(duration, callback);Betrachten Sie das folgende Beispiel, wo wir die Anweisungen platziert haben slideToggle()e alert()eins neben dem anderen. Wenn Sie diesen Code ausprobieren, wird die Warnung sofort nach dem Klicken auf die Umschaltfläche angezeigt, ohne zu warten, bis der Umschalteffekt der Folie abgeschlossen ist.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Und hier ist die modifizierte Version des vorherigen Beispiels, in das wir die Anweisung eingefügt haben alert() innerhalb einer Callback-Funktion für die Methode slideToggle(). Wenn Sie diesen Code ausprobieren, wird die Warnmeldung angezeigt, sobald der Folienumschalteffekt abgeschlossen ist.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Ebenso können Sie defiFinish-Rückruffunktionen für die anderen jQuery-Effektmethoden, z show(), hide(), fadeIn(), fadeOut(), animate(), Etc.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Wenn Sie den obigen Beispielcode ausprobieren, erhalten Sie dieselbe Warnmeldung zweimal, einmal pro Element <h1> e <p>, nachdem Sie auf die Schaltfläche „Aktivieren“ geklickt haben.
BlogInnovazione.it
Die vorausschauende Wartung revolutioniert den Öl- und Gassektor mit einem innovativen und proaktiven Ansatz für das Anlagenmanagement.…
Die britische CMA hat eine Warnung zum Verhalten von Big Tech auf dem Markt für künstliche Intelligenz herausgegeben. Dort…
Das „Green Houses“-Dekret, das von der Europäischen Union zur Verbesserung der Energieeffizienz von Gebäuden erlassen wurde, hat seinen Gesetzgebungsprozess mit… abgeschlossen.
Der Jahresbericht von Casaleggio Associati über E-Commerce in Italien wird vorgestellt. Bericht mit dem Titel „AI-Commerce: die Grenzen des E-Commerce mit künstlicher Intelligenz“.…