JQuery - Animation - Versionsgeschichte

37.49.32.84 am 3. März 2017 um 10:02 Uhr

2017-03-03T10:02:17Z

37.49.32.84: /* Animation Queue */

2017-03-03T09:57:20Z

Animation Queue

37.49.32.84: /* Animation Queue */

2017-03-03T09:20:48Z

Animation Queue

37.49.32.84: /* Callback */

2017-03-03T09:05:34Z

Callback

37.49.32.84: /* Callback */

2017-03-03T09:05:13Z

Callback

37.49.32.84 am 3. März 2017 um 09:03 Uhr

2017-03-03T09:03:45Z

37.49.32.84: /* Animation Events */

2017-03-03T09:02:57Z

Animation Events

37.49.32.84 am 3. März 2017 um 08:59 Uhr

2017-03-03T08:59:20Z

37.49.32.84: /* Animation Queue */

2017-03-03T08:53:28Z

Animation Queue

37.49.32.84: Die Seite wurde neu angelegt: „== Animation == Hinweis: Damit Elemente bewegt werden können muss die Positionierung auf absolute, relative oder fixed stehen. $(selector).animate({params},…“

2017-03-03T08:44:50Z

Die Seite wurde neu angelegt: „== Animation == Hinweis: Damit Elemente bewegt werden können muss die Positionierung auf absolute, relative oder fixed stehen. $(selector).animate({params},…“

Neue Seite

== Animation ==
Hinweis: Damit Elemente bewegt werden können muss die Positionierung auf absolute, relative oder fixed stehen.

$(selector).animate({params},speed,callback);
Beispiel
<syntaxhighlight lang="javascript">
$("button").click(function(){
$("div").animate({left: '250px'});
});
</syntaxhighlight>

'''Mehrere Eigenschaften gleichzeitig animieren'''
<syntaxhighlight lang="javascript">
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
</syntaxhighlight>

'''Relative Wertangaben'''
height: '+=150px',
width: '+=150px'

Vordefinierte Variablen
//"show", "hide", "toggle"
height: 'toggle'

== Animation Queue ==
* Wenn mehrere animate() Aufrufe, auf ein Objekt, nacheinander erfolgenc erzeugt jQuery intern einen Queue mit diesen Aufrufen. Dann werden sie nacheinander abgearbeitet.
* Ein Queue hat einen Namen
* Standardname für Queues wenn nicht ander benannt ist 'fx'
<syntaxhighlight lang="javascript">
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
</syntaxhighlight>
== Animation Events ==
* finish() / stop(true,true)

← Nächstältere Version		Version vom 3. März 2017, 10:02 Uhr
Zeile 102:		Zeile 102:
	</syntaxhighlight>		</syntaxhighlight>
	So kann man auch Animationen verschiedener Elemente aneinander hängen.		So kann man auch Animationen verschiedener Elemente aneinander hängen.
		+
		+	== Verschiedene Objekte sequenziell animieren ==
		+	Dies könnte mit verschiedenen Callbacks realisiert werden. Seit V 1.6 gibt es die promise() Funktion die gut mit when und done zusammenarbeitet.
		+
		+	.promise( [type ] [, target ] )
		+	<pre>
		+	type (default: fx) Type: String The type of queue that needs to be observed.
		+	target Type: PlainObject Object onto which the promise methods have to be attached
		+	</pre>
		+	<syntaxhighlight lang="javascript">
		+	$.when(
		+	$("#one").animate({left: 100}, 3000).promise(),
		+	$("#two").animate({left: 200}, 3000).promise()
		+	).done(function() {
		+	$("#three").animate({left: 300}, 3000).promise()
		+	.done(function() {
		+	$("#four").animate({left: 400}, 3000).promise()
		+	})
		+	})
		+	</syntaxhighlight>

@@ Zeile 41: / Zeile 41: @@
 });
 </syntaxhighlight>
 === Chaining für bessere Performance ===

@@ Zeile 41: / Zeile 41: @@
 });
 </syntaxhighlight>
 === Chaining für bessere Performance ===
 Mit dieser schreibweise muß jQuery beim erstellen des Queue, das Element nur einmal finden.
@@ Zeile 48: / Zeile 49: @@
   .slideUp(2000)
   .slideDown(2000);
-=== stop() / finish() ===
   $(selector).stop(stopAll,goToEnd);
 Beendet die aktuelle Animation. Der Qeue bleibt erhalten. Wenn stopAll auf true gesetzt wird, wird der queue gelöscht. Ist goToEnd auf true gesetzt wird das Ende der Animation angesprungen.
 finish() ist ein Shortcut für stop(true,true)
 == Callback ==

@@ Zeile 59: / Zeile 59: @@
 '''Beispiel allgemein'''
   $(selector).hide(speed,callback);
 <syntaxhighlight lang="javascript">
 $("button").click(function(){

@@ Zeile 55: / Zeile 55: @@
 == Callback ==
-Wenn eine Animation 100% beendet ist, kann eine Callback Funktion aufgerufen werden.
+Wenn eine Animation 100% beendet ist, kann eine Callback Funktion aufgerufen werden. Diese Funktion wird also nach dem Ende der Animation ausgeführt.
 <syntaxhighlight lang="javascript">
 $("button").click(function(){

@@ Zeile 56: / Zeile 56: @@
 == Callback ==
 Wenn eine Animation 100% beendet ist, kann eine Callback Funktion aufgerufen werden.
+<syntaxhighlight lang="javascript">
 $("button").click(function(){
      $("p").hide("slow", function(){
@@ Zeile 62: / Zeile 62: @@
      });
 });
 Ohne Callback würde der alert zu früh angezeigt
-Falsch:
+'''Falsch'''
 $("button").click(function(){
      $("p").hide(1000);
      alert("The paragraph is now hidden");
 });
 So kann man auch Animationen verschiedener Elemente aneinander hängen.