Margin animieren mit jQuery.

Margin animieren mit jQueryIn diesem Tutorial werde ich erklären, wie man mit jQuery das Margin eines bereits vorhanden HTML Objekts verändern kann. Dieser Effekt beansprucht wenig Aufwand und ist sehr ansehnlich.

Wir beginnen, in dem wir einen Kontainer erstellen, in dem sich ein Link befindet. Dies sieht dann so aus:

<div class="kontainer">
<a>Ein Link</a>
</div>

Da wir den Kontainer mit der Klasse “kontainer” benannt haben, kann men den Link nun ohne Probleme direkt finden und ihn so animieren. Nachdem wir das jQuery-script eingebunden haben können wir sofort einen script selbst erstellen.

$(function(){
$('.kontainer a').hover(function(){
 
});
});

Wie man erkennt, befindet sich in der Funktion eine weitere Funktion, die aktiviert wird, sobald man mit der Maus über “.kontainer a” fährt. Da in der inneren Funktion noch nichts definiert ist, passiert noch nichts wenn man mit der Maus den Link berührt.

$(function(){
$('.kontainer a').hover(function(){
$(this).stop(true, true).animate({marginLeft: "+=5"});
 
}, function(){
 
$(this).stop(true, true).animate({marginLeft: "-=5"});
 
});
});

Das ist schon der vollständige Code. Nachdem die erste Funktion des “.hover” erfüllt wurde, beginnt die nächste. Dies sieht man daran, dass die erste Funktion geschlossen wird und nach dem Komma fängt die zweite an.
“.stop(true, true)” sorgt dafür, dass der Link beim vorzeitigem Verlassen der Maus wieder zurück zum Ursprungspunkt wandert. Wenn dies nicht dort wäre und man würde mit der Maus den Link verlassen bevor er 5px margin nach links animiert hat, so würde er aber 5px “zurückanimieren”. Nach mehrmaligem drübergehen mit der Maus würde sich der Link nicht mehr auf der Seite befinden, da er einfach einen viel zu großen Abstand hat, der ihn rausdrückt.
Wenn man versucht das Margin zu animieren, dann muss man auf die korrekte Schreibweise achten, ansonsten wird es nicht funktionieren. Wenn man sich nicht sicher ist, dann schreibt man wohl “margin-left: ’5px’ ” , wie man es auch in CSS-Dateien tun würde. In jQuery geht das so leider nicht. Deswegen muss der Code beim animieren vom Margin so aussehen:

.animate({marginLeft: "-=5"});

Beim durchstöbern von einigen Blogs habe ich dieses sehr schöne Beispiel gefunden, in dem wird das Margin eines Quadrats animiert.

Share on Twitter
This entry was posted in jQuery and tagged , , . Bookmark the permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


vier + = 6

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">