Anzeige
Tutorialbeschreibung

jQuery - eigene Effekte definieren

jQuery - eigene Effekte definieren

Eine der Besonderheiten von jQuery ist die Möglichkeit zur Definition eigener Effekte. Dank dieser selbst definierten Effekte lassen sich CSS-Eigenschaften von Elementen animieren. Ein typisches Beispiel dafür ist die position-Eigenschaft, über die sich die Position eines Elements bestimmen lässt. Animiert man nun mittels jQuery-Effekt eben dieses position, kann man das betreffende Element dynamisch verschieben lassen. Genau um solche Dinge geht es im vorliegenden Tutorial. Im Vordergrund steht dabei die Frage, wie man eigene Effekte definieren kann.


jQuery stellt einige vordefinierte Funktionen zur Verfügung, von denen einige bereits im Rahmen dieser Tutorial-Reihe vorgestellt wurden. Exemplarisch seien hierfür show(), hide() und toggle() genannt. Nun decken diese Standardeffekte bereits eine große Anzahl möglicher Einsatzbereiche ab. Allerdings hat jQuery – verständlicherweise – nicht immer den passenden Effekt parat. In solchen Fällen kann man aber eigene Effekte definieren.

Über die animate()-Funktion lassen sich Effekte beschreiben. Dabei gibt es zwei verschiedene animate()-Funktionen, die sich in den ihnen übergebenen Parametern unterscheiden. Die allgemeine Syntax eines Effekts sieht dabei folgendermaßen aus:

animate( Parameter, [Dauer], [Easing-Effekt], [Callback-Funktion] ) 

Die möglichen Werte bedeuten:
  • Parameter – Hierüber gibt man die CSS-Effekte an, die animiert werden sollen.
  • Dauer – Dieser Parameter ist optional. Angegeben wird über ihn, wie lange der Effekt dauert. Mögliche Werte sind slow (langsam), normal (mittel) und fast (schnell). Ebenso kann ein numerischer Wert übergeben werden. Durch den gibt man die Effektdauer in Millisekunden an.
  • Easing-Effekt – Hierüber wird der gewünschte Easing-Effekt bestimmt. Um einen der beiden vordefinierten Effekte linear oder swing nutzen zu können, muss das Easing-Plug-in geladen werden. Ausführliche Informationen über dieses Plug-in finden Sie auf der offiziellen Projektseite unter http://gsgd.co.uk/sandbox/jquery/easing/. Dieser Parameter ist optional.
  • Callback-Funktion – Dabei handelt es sich um eine Funktion, die ausgeführt wird, wenn die Animation vollständig ist. Dieser Parameter kann, muss aber nicht gesetzt werden.

Neben der gezeigten Variante gibt es noch eine weitere animate()-Funktion.
animate( Parameter, Optionen )
Auch hier wieder ein Blick auf die möglichen Werte:
  • Parameter – Hierüber gibt man die CSS-Eigenschaften an, die animiert werden sollen.
  • Optionen – Über die Optionen konfiguriert man die Animation.

 
Beide Funktionen lassen sich einfach nutzen. Dabei bleibt es letztendlich Ihnen überlassen, welche dieser Varianten Sie verwenden.

Um Ihnen zu zeigen, wie sich animate() definieren lässt, folgt zunächst ein kleines Beispiel, das den Einstieg ebnen soll. Durch diese Syntax wird ein div-Bereich bewegt. Die Bewegung läuft dabei relativ ab. Bei jedem Mausklick wird der div-Bereich immer weiter um 100 Pixel nach links oder nach rechts verschoben. Zunächst der Anblick nach dem Aufrufen der Seite.
[Beispiel anzeigen]

Bilder



 
Jetzt wird einmal auf die Nach-rechts-Schaltfläche geklickt.

Bilder



 
Es ist zu erkennen, dass sich der div-Bereich nach rechts bewegt hat. Klickt man jetzt erneut auf den Nach-rechts-Button, wandert der Bereich noch einmal 100 Pixel nach rechts.

Bilder



 
Das funktioniert in dieser Form natürlich auch nach links und sogar über den Bildschirmrand hinaus. Dieser Effekt lässt sich sehr einfach anwenden. Zunächst der eigentliche Skript-Bereich:
[Beispiel anzeigen]
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
 $("#right").click(function(){
      $(".block").animate({"left": "+=100px"}, "slow");
    });
    $("#left").click(function(){
      $(".block").animate({"left": "-=100px"}, "slow");
    });
  });
/* ]]> */
</script>

Nachdem die notwendigen Bibliotheken eingebunden sind, wird der Effekt an click() gebunden. (Das ist sinnvoll, schließlich soll der Effekt erst ausgeführt werden, wenn ein Anwender auf eine der beiden Schaltflächen klickt). In diesem Tutorial steht allerdings etwas anderes im Vordergrund. Entscheidend für den Effekt ist nämlich die folgende Zeile:
$(".block").animate({"left": "+=100px"}, "slow");

Hier wird über .block zunächst das Element bestimmt, auf das der Effekt angewendet werden soll. Dabei handelt es sich um ein Element mit der Klasse block.

Der Funktion animate() werden verschiedene Werte übergeben. left ist dabei die zu animierende CSS-Eigenschaft. Über "+=100px" wird der Wert der CSS-Eigenschaft bestimmt. Hier haben Sie die Wahl zwischen absoluten und relativen Werten. Im vorliegenden Fall wurde die relative Variante gewählt. Durch "+=100px" wird das Element jeweils relativ um 100 Pixel von der aktuellen Position aus nach rechts verschoben. Nach links lässt sich das Element natürlich ebenfalls relativ verschieben. Dafür  gibt man den Wert "-=100px" an. Abschließend erwartet animate() noch eine Geschwindigkeitsangabe. Die bestimmt, wie lange der Effekt dauern soll. Im vorliegenden Fall wurde slow, also eine langsame Geschwindigkeit, gewählt.
Fast die gleichen Angaben sind dann auch für das Rücken des div-Bereichs nach links nötig.
$(".block").animate({"left": "-=100px"}, "slow");

Weiter geht es mit der Definition des Dateikörpers. Dort werden der zu animierende div-Bereich und zwei Schaltflächen eingefügt.
<body>
 <button id="left">Nach links</button> <button id="right">Nach rechts</button>
<div class="block">PSD</div>
</body>

Entscheidend sind die beiden IDs left und right. Erst dadurch greift das zuvor definierte click().
 $("#right").click(function()

Was jetzt noch fehlt, sind einige CSS-Angaben.
&<style type="text/css">
/* <![CDATA[ */
 div { 
    position:absolute; 
    background-color:#abc;
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
  }
  /* ]]> */
</style>

 
Im vorherigen Beispiel wurde jeweils lediglich eine CSS-Eigenschaft angegeben, die durch animate() animiert werden sollte. Ebenso kann man aber auch mehrere Eigenschaften bestimmen, die dann – wie in der nachfolgenden Syntax zu sehen – nacheinander animiert werden.
[Beispiel anzeigen]

Bilder



 
Anhand der Abbildung ist zu erkennen, dass der div-Bereich größer wird und seine Position nach rechts und nach unten verschoben wurde.
$(document).ready(function() {
 $("#right").click(function(){
      $(".block").animate({"left": "+=100px"}, "slow");
                  $(".block").animate({"top": "+=100px"}, "slow");
                  $(".block").animate({"width": "200px"}, "slow");
                  $(".block").animate({"height": "200px"}, "slow");
    });
    $("#left").click(function(){
       $(".block").animate({"left": "-=100px"}, "slow");
                   $(".block").animate({"top": "-=100px"}, "slow");
     });
});

In den bisherigen Beispielen sind die Effekte immer nacheinander abgelaufen. Hat man also z.B. auf die Nach-rechts-Schaltfläche geklickt, wurde der div-Bereich nacheinander
  • um 100 Pixel nach rechts verschoben,
  • um 100 Pixel nach unten verschoben,
  • 200 Pixel breiter und
  • 200 Pixel höher.

Ebenso kann man die Effekte aber auch parallel ablaufen lassen. Dafür müssen mehrere Eigenschaften dem gleichen animate()-Aufruf zugewiesen werden.
[Beispiel anzeigen]
$("#left").click(function(){
 $(".block").animate({"left": "+=100px", "width": "+=200px"},"slow");
});

In diesem Beispiel wird der div-Bereich um 100 Pixel nach rechts verschoben. Gleichzeitig wird dessen Breite um jeweils 200 Pixel vergrößert. Im Gegensatz zum Aufruf mehrerer animate()-Anweisungen werden die Anpassungen des div-Bereichs in diesem Fall parallel ausgeführt.
Wie viele Effekte Sie gleichzeitig definieren, bleibt dabei Ihnen überlassen. jQuery setzt hier keine Einschränkungen.

Fazit

Wer die grundlegenden CSS-Eigenschaften kennt, kann diese dank animate() ganz einfach animieren. Dabei hat man dann immer die Wahl, ob die Anweisungen parallel oder zeitversetzt ausgeführt werden sollen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dickerfreddy
  • 07.02.2010 - 22:13

Danke hat mir geholfen und ich hoffe ich kann es so umsetzen, Danke

Portrait von S_A_M
  • 07.02.2010 - 17:08

Gute Möglichkeit. Danke

Portrait von eldibujante
  • 05.02.2010 - 16:12

Danke für die hilfreiche Erklärung :-)

Portrait von qwertzui1
  • 05.02.2010 - 10:06

Sehr Gut, Vielen Dank!

Portrait von websmurf
  • 05.02.2010 - 09:41

Das ist eine sehr interessante Möglichkeit in jQuery. Bisher habe ich immer nur die vorgefertigten Eigenschaften genutzt. Das eröffnet ganz neue Möglichkeiten - Danke.

Portrait von scherar
  • 02.02.2010 - 06:41

Sehr schöne Einführung! Danke, mehr davon.

Portrait von Spielmacher
  • 01.02.2010 - 01:45

Sehr anschaulich erklärt!
Danke

x
×
×