Anzeige
Tutorialbeschreibung

jQuery - vordefinierte Effekte nutzen

jQuery - vordefinierte Effekte nutzen

Das jQuery-Framework bietet zahlreiche Möglichkeiten zum Animieren von CSS-Eigenschaften. Wer also schon immer mal Bilder dynamisch ein- und ausblenden lassen wollte, kann das nun dank jQuery ganz einfach erledigen. Und das ist einer der großen Unterschiede zur Definition von Animationen mit "normalem" JavaScript. Denn dort ist die Arbeit mit Timern und Intervallen vergleichsweise umständlich. In diesem Tutorial werden zunächst die vordefinierten Effekte gezeigt, die jQuery zu bieten hat. Darüber hinaus kann man aber auch eigene Animationen definieren. Mehr zu diesem Thema dann in einem späteren Tutorial.


Die Animationen basieren im Allgemeinen darauf, dass die Veränderung eines Teils der Webseite bzw. der gesamten Webseite gleichmäßig über einen bestimmten Zeitraum abläuft. Das bedeutet im Umkehrschluss, dass die jQuery-Techniken für solche Animationen zeitbasiert sind. (Wenngleich es auch einige Dinge gibt, bei denen auf zeitabhängige Angaben verzichtet werden kann).
Im Allgemeinen werden bei jQuery für Animationen zwei Werte benötigt:

  • Die Dauer der Animation in Millisekunden.
  • Die CSS-Eigenschaft, die animiert werden soll.
Zusätzlich kann man den Übergang definieren. Dadurch lässt sich ein Effekt beispielsweise beschleunigen oder verlangsamen.

Effekte anwenden

In jQuery müssen Sie sich nicht mit den aus JavaScript bekannten Animationsproblemen befassen. Denn jQuery bringt vordefinierte Animationen bzw. Animationseffekte mit.
  • fadeIn() / fadeout() / fadeTo()
  • show() / hide()
  • toggle()
  • slideDown() / slideUp() / slideToggle()

Ein erstes Beispiel soll zeigen, wie einfach sich die Effekte tatsächlich anwenden lassen. Dazu werden zunächst innerhalb des Dateikörpers zwei Div-Bereiche definiert.
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>

Durch ein wenig jQuery-Syntax werden diese beiden Bereiche nun noch etwas gestaltet. Beiden Elementen werden dabei eine Hintergrundfarbe, die Breite und Höhe sowie ein Randabstand nach unten zugewiesen.
<script type="text/javascript">
/* <![CDATA[ */
 google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("div").css({
 "width": 150,
 "height": 150,
 "marginBottom": 20,
 "background": "red"
})
});
/* ]]> */
</script>

Das Ergebnis dieser Syntax sieht folgendermaßen aus:
[Beispiel anzeigen]

Bilder



 
Im nächsten Schritt wird ein erster Effekt hinzugefügt. Konkret geht es dabei um fadeOut(). Über diesen Effekt lassen sich Elemente ausblenden. Das Skript kann also entsprechend erweitert werden.
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("div").css({
 "width": 150,
 "height": 150,
 "marginBottom": 20,
 "background": "red"
})
$("#box1").fadeOut();
});
/* ]]> */
</script>

Lässt man sich den Effekt anzeigen, wird box1 ausgeblendet. Den ihr zugewiesenen Anzeigeplatz nimmt box2 ein.
[Beispiel anzeigen]

Bilder



 
Im vorherigen Beispiel wurde fadeOut() ohne weitere Parameter verwendet. Das kann man so machen, es geht aber auch anders. Als Parameter können die Geschwindigkeit sowie eine Callback-Funktion übergeben werden. Welche Parameter für welchen Effekt zur Verfügung stehen, können Sie jeweils auf der offiziellen Projektwebseite von jQuery nachlesen.

Bilder



Gibt man bei fadeOut() keinen Parameter an, wird standardmäßig der Wert 400 angenommen. Dabei beschreibt diese 400 die Anzahl der Millisekunden, die vergeht, bis die CSS-Eigenschaft opacity einen Wert von 0 angenommen hat. Wobei mit opacity die Transparenz eines Elements beschrieben wird. Der Wert 0 legt dabei fest, dass das betreffende Element unsichtbar ist. Neben einer Millisekunden-Angabe kann auch eines der folgenden drei Schlüsselwörter verwendet werden:
  • slow – langsam
  • normal – mittel
  • fast – schnell

 
Im nächsten Beispiel werden fadeOut() je einmal ein Schlüsselwort und ein Wert in Millisekunden zugewiesen.
$("#box1").fadeOut("slow");
$("#box2").fadeOut(300);

Entscheidend ist, dass bei allen jQuery-Effekten automatisch nach deren Ablauf der Wert von opacity auf none gesetzt wird.

Die beiden Effekte show() und hide() sind Ihnen bereits in einem vorherigen Tutorial begegnet. Mit diesen Effekten lassen sich Elemente ein- und ausblenden. Auch an dieser Stelle noch einmal der Hinweis, dass es detaillierte Informationen zur den bei den Effekten verfügbaren Werten immer auf der offiziellen Projektwebseite gibt. Im folgenden Beispiel werden die beiden Effekte show() und hide() in Aktion gezeigt. Im Dateikörper werden zunächst zwei Schaltflächen definiert, über die sich später die entsprechenden Div-Bereiche aus- und wieder einblenden lassen. Daran schließen sich die eigentlichen Div-Bereiche an.

Bilder



[Beispiel anzeigen]
<input id="verstecke" type="button" value="verstecken" />
<input id="zeige" type="button" value="zeigen" />
<div id="div1" style="position: absolute; left: 10px; top: 60px; background-color:#00FFCC;">Box 1</div>
<div id="div2" style="position: absolute; left: 160px; top: 60px; background-color:#00FFCC;">Box 2</div>
<div id="div3" style="position: absolute; left: 310px; top: 60px; background-color:#00FFCC;">Box 3</div>

Das Skript selbst hält dann keine größeren Überraschungen parat. Nachdem die Funktion ausgelöst wurde, werden die Div-Bereiche nacheinander entweder ein- oder ausgeblendet. Dazu gibt es jeweils unterschiedliche Geschwindigkeiten für hide() und show().
<script type="text/javascript">
/* <![CDATA[ */
 $(document).ready(function() {
   $("#verstecke").click(function() {
     $("#div1").hide("slow", function() {
       $("#div2").hide("normal", function() {
         $("#div3").hide("fast");
       });
     });
   });
   $("#zeige").click(function() {
     $("#div1").show("slow");
     $("#div2").show("normal");
     $("#div3").show("fast");
   });
 });
/* ]]> */
</script>
 



 

Weitere Effekte

Interessante Effekte sind darüber hinaus slideDown(), slideUp() und slideToggle(). Darüber lässt sich die Höhe eines Elements verändern. Auf diese Weise kann man Elemente effektvoll anzeigen und wieder verschwinden lassen. Auch hierzu zunächst ein Beispiel: (Beachten Sie, dass dieses Beispiel auf den gleichen Dateikörper zugreift, der auch im vorherigen Beispiel verwendet wurde.)
[Beispiel anzeigen]
<script type="text/javascript">

/* <![CDATA[ */
 $(document).ready(function() {
   $("#verstecke").click(function() {
     $("#div1").slideUp("slow", function() {
       $("#div2").slideUp("normal", function() {
         $("#div3").slideUp("fast");
       });
     });
   });
   $("#zeige").click(function() {
     $("#div1").slideDown("slow");
     $("#div2").slideDown("normal");
     $("#div3").slideDown("fast");
   });
 });
/* ]]> */
</script>

slideDown() und slideUp() wurden in diesem Beispiel unterschiedliche Geschwindigkeiten zum Ein- und Ausblenden der Elemente zugewiesen. slideToggle() funktioniert prinzipiell genauso wie slideDown() und slideUp(). Auch damit lassen sich also Elemente ein- und ausblenden. Die Besonderheit an slideToggle() ist allerdings, dass das in Abhängigkeit des aktuellen Anzeigenzustands der betreffenden Elemente passiert. Wird ein Element aktuell also angezeigt, blendet es slideToggle() aus. Ist es hingegen versteckt, kann man es mit slideToggle() wieder sichtbar machen. Wie das funktioniert, zeigt das folgende Beispiel:
[Beispiel anzeigen]
 
<script type="text/javascript">
/* <![CDATA[ */
 $(document).ready(function() {
 $(".fadeNext").click(function(){  
 $(this).next().slideToggle()
 return false;
 })
 });           
/* ]]> */
</script>

Diese Syntax macht deutlich, dass sich slideToggle() genauso anwenden lässt wie slideDown() und slideUp(). Im nächsten Schritt wird mittels CSS ein Bereich unsichtbar gemacht.
.fader {
 opacity:0;
 display:none;
}

Dieser Bereich soll nämlich tatsächlich erst dann angezeigt werden, wenn auf den entsprechenden Link geklickt wird.
<a href="#" class="fadeNext">Zeige den Text</a>
<div class="fader">
 <p>Hier steht ganz viel Text</p>
</div>

slideToggle() erkennt nach dem Aufrufen der Seite, dass der Div-Bereich, dem die Klasse fader zugewiesen wurde, unsichtbar ist. Klickt man auf den Link, wird der Text angezeigt. Wird der Link erneut angeklickt, verschwindet der Text wieder.

Fazit

Die jQuery-Standardeffekte lassen sich sehr einfach einbinden. Für viele Anwendungen reichen die gebotenen Möglichkeiten allemal. Dort, wo es etwas mehr sein soll, besteht dann zusätzlich die Möglichkeit, eigene Animationen zu definieren. Dazu dann aber später mehr.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Crusher
  • 19.04.2010 - 17:47

anke für das tutorial!

Portrait von torion7
  • 18.01.2010 - 12:23

super, danke für das tutorial!

Portrait von maclotte
  • 12.01.2010 - 09:43

danke das war sehr hilfreich

Portrait von maclotte
  • 12.01.2010 - 09:06

danke das war sehr hilfreich

Portrait von soulstyle
  • 10.01.2010 - 03:28

Sehr hilfreich. Geht das auch mit Ebenen ?
z.B. Überlappung von einer Box mit dem Content einer Page?

Portrait von perra
  • 09.01.2010 - 16:32

ach beispiel hast du ut mir leid ... hab ich nicht gesehn dankeschoen =) hast noch mal 5 sterne

Portrait von perra
  • 09.01.2010 - 16:27

Fürn Anfänger scheint das nichts zu sein, bzw für mich ich weiss nich wohin du die sachen eingefügt hast in den head in body oder sonst wohin.
wäre schoen wenn du das ganze hoch landen könntest als Beispiel. oder deine Angaben ergänzst =)

Portrait von helgeschneider
  • 09.01.2010 - 14:43

Danke für dein sehr gelungenes Tutorial

Portrait von No3x
  • 08.01.2010 - 15:59

super erklärt! leider etwas wenig

Portrait von Rambow360
  • 08.01.2010 - 12:23

Sehr nützlich, habe das schon gesucht, Danke.

Portrait von tfhsnak3
  • 08.01.2010 - 11:40

sehr gut erklärt das ganze ;) 5*

Portrait von websmurf
  • 08.01.2010 - 08:25

Auch von mir 5* für diese interessante Ausführung

Portrait von Mew

Mew

  • 06.01.2010 - 15:30

Super tut :) Gibt 5 *

x
×
×