Latest web development tutorials

jQuery-Effekte - Animation

jQuery animieren () -Methode können Sie benutzerdefinierte Animationen zu erstellen.



jQuery

jQuery Animationen - Animation () -Methode

jQuery animieren () -Methode verwendet, um benutzerdefinierte Animation zu erstellen.

Syntax:

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

Erforderliche params Parameter definiert die Bildung von CSS-Eigenschaften Animation.

Die optionale Geschwindigkeitsparameter gibt die Dauer des Effekts. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.

Der optionale Callback-Parameter ist der Name der Funktion nach Abschluss ausgeführt.

Das folgende Beispiel zeigt eine einfache Anwendung belebtes () -Methode. Es <div> Element auf der rechten Seite 250 Pixeln zu bewegen:

Beispiele

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

Versuchen »

Lampe Standardmäßig haben alle HTML-Elemente eine statische Position und kann sich nicht bewegen.
Für Betriebsposition, denken Sie daran das erste Element CSS Attribut position auf relative gesetzt, fest oder absolut!

jQuery animieren () - Betrieb mehrerer Eigenschaften

Bitte beachten Sie, dass der Prozess um die Animation zu erzeugen, mehrere Eigenschaften verwenden können:

Beispiele

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Versuchen »

LampeSie können () -Methode animieren alle CSS - Attribute zu betreiben?

Ja, fast! Allerdings ist die wichtige Sache zu erinnern: Wenn belebter mit () schreiben, um alle Attribute Namen müssen die Kamel-Notation, zum Beispiel zu verwenden, müssen anstelle von paddingLeft padding-left, statt mit margin margin-right, etc. verwendet werden .

Zur gleichen Zeit wird die Farbanimation nicht in den Kern jQuery Bibliothek enthalten.

Wenn Sie Farbe Animation generieren müssen, müssen Sie jquery.com herunterladen Farbe Animations - Plugin.


jQuery animieren () - die Verwendung von relativen Wert

Sie können auch den relativen Wert zu definieren (der Wert auf den aktuellen Wert des Elements relativ ist). Benötigen Sie den Wert vorangehen mit der + = oder - =:

Beispiele

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

Versuchen »

() JQuery animieren - verwenden vordefinierten Wert

Sie können auch den Wert der Animationseigenschaft "Show", "verstecken" oder "Toggle" setzen:

Beispiele

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Versuchen »

jQuery animieren () - Mit dem Queue-Funktion

Standardmäßig bietet jQuery Queuing-Funktionen für die Animation.

Dies bedeutet, dass, wenn Sie mehr als eine nach der anderen belebtes () Aufruf schreiben, wird jQuery diese "interne" Warteschlange einen Methodenaufruf erstellen. Dann eins nach dem anderen zu laufen diese Anrufe zu animieren.

Beispiel 1

$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

Versuchen »

Das folgende Beispiel für das <div> Element wird auf der rechten Seite 100 Pixel bewegt wird, und dann die Größe des Textes erhöhen:

Beispiel 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Versuchen »