Suche…


Syntax

  1. (Selektor) .animate ({Stile}, {Optionen})

Parameter

Parameter Einzelheiten
Eigenschaften Ein Objekt mit CSS-Eigenschaften und Werten, zu dem die Animation verschoben wird
Dauer (Standard: 400) Eine Zeichenfolge oder Nummer, die bestimmt, wie lange die Animation ausgeführt wird
Lockerung (Standardeinstellung: swing) Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll
Komplett Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist. Sie wird einmal pro übereinstimmendem Element aufgerufen.
Start Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation beginnt.
Schritt gibt eine Funktion an, die für jeden Schritt in der Animation ausgeführt werden soll.
Warteschlange ein boolescher Wert, der angibt, ob die Animation in der Effektwarteschlange platziert werden soll oder nicht.
Fortschritt gibt eine Funktion an, die nach jedem Schritt der Animation ausgeführt werden soll.
erledigt Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation endet.
Scheitern Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation nicht abgeschlossen wird.
specialEasing Eine Karte mit einer oder mehreren CSS-Eigenschaften aus dem styles-Parameter und den entsprechenden Beschleunigungsfunktionen.
immer Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation ohne Abschluss beendet wird.

Animation mit Rückruf

Manchmal müssen wir die Wortposition von einem Ort zum anderen ändern oder die Größe der Wörter verkleinern und die Farbe der Wörter automatisch ändern, um die Attraktivität unserer Website oder Web-Apps zu verbessern. JQuery hilft mit diesem Konzept sehr viel mit fadeIn(), hide(), slideDown() aber seine Funktionalität ist begrenzt und es wurde nur die spezifische Aufgabe erledigt, die ihm zugewiesen wurde.

Jquery behebt dieses Problem, indem es eine erstaunliche und flexible Methode namens .animate() . Mit dieser Methode können Sie benutzerdefinierte Animationen festlegen, die css-Eigenschaften verwenden, die die Berechtigung zum Überfliegen von Grenzen geben. Wenn wir zum Beispiel die Eigenschaft css style als width:200; angeben width:200; und die aktuelle Position des DOM-Elements ist 50, animiere Methode den aktuellen Positionswert von einem gegebenen CSS-Wert und animiere dieses Element auf 150.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

Liste der CSS-Style-Eigenschaften, die die .animate() -Methode zulassen.

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

In der .animate() -Methode angegebene .animate() .

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

In .animate() -Methode angegebene .animate() .

"Swing"
"linear"

Hier einige Beispiele mit komplexen Animationsoptionen.

ZB 1:

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

ZB 2:

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow