✔ Schöner Hovereffekt

[Xym]

Guten Tag,

ich möchte per Javascript ein schönen Hovereffekt erstellen für mein Menü.
Die Links sollen langsam von Rand weg, wenn man mit der Maus rüber geht. Wenn man mit der Maus zurück geht, soll es wieder an die ürsprüngliche Position.

Mein Ansatz:

index.php

<div class="nav">
	
		<h2> Navigation 2 </h2>
		
		<ul id="m4">
			<li> <a id="m1" href="#" onmouseover="ani1.start('padding-left','0px','5px')" onmouseout="ani1.start('padding-left','5px','0px')"> Men&uuml; 1 </a> </li>
			<li> <a id="m2" href="#" onmouseover="ani2.start('padding-left','0px','5px')" onmouseout="ani2.start('padding-left','5px','0px')"> Men&uuml; 2 </a> </li>
			<li> <a id="m3" href="#" onmouseover="ani3.start('padding-left','0px','5px')" onmouseout="ani3.start('padding-left','5px','0px')"> Men&uuml; 3 </a> </li>
		</ul>
	
	</div>

slide.js

<script type="text/javascript" src="mootools-core-1.4.2-full-nocompat.js"></script>
	<script type="text/javascript">
	var ani1;
	var ani2;
	var ani3;
	var ani4;
	
	window.addEvent('domready', function() {
	
		ani1 = new Fx.Tween('m1', {duration: 100});
		ani2 = new Fx.Tween('m2', {duration: 100});
		ani3 = new Fx.Tween('m3', {duration: 100});
	
	});
	
	</script>

Problem dabei ist: bei schnellen Mausbewegungen und bei vorzeitigem Abbruch funktioniert es nicht mehr.

 

[fbfeix]

warum machst dus nicht mit CSS?

Beispiel wenn deine Listitems noch ne Klasse "Item" bekommen

.Item
{
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
} 

.Item:hover
{
margin-left: 20px;
}

Wenn du sehr schnell mit der Maus über so ein Item fährst wird die Animation automatisch abgebrochen.
Hab das jetzt aber mal nur aus dem Kopf gemacht. Ich glaube es gibt auch noch ein paar Effekte für dieses Transition. Zum Beispiel während der Animation die Wertänderung zu verschnellern oder eben zu verlangsamern bzw. konstant zu lassen.

 

[Xym]

Super Antwort vielen Dank!!
Läuft jetzt alles sehr flüssig. Genau so wie ich es haben wollte
Dachte das ginge nur per Javascript, aber da habe ich mich wohl getäuscht.