Hallo.
Ich möchte folgendes in einer hübschen Animation realisieren:
html-seminar.de/woltlab/attachment/416/
Das einzige Problemw as ih noch habe ist, dass es nicht flüssig sondern ruckartig abläuft, obowhl das garnicht seien dürfte.
Durch das setTimeout() müsste es flüssig ablaufen, was es halt aber leider nicht tut 
Ihr könnt das ganze auch auf meinem Webserver anschauen
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta content="charset=UTF-8">
<link href="css/reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<title>
Phip
</title>
<script>
function bewegen( multiplikator )
{
/*
if( document.getElementsByTagName("leiste")[0].style.left.replace("px","") > 320*multiplikator )//von rechts nach links
{
//document.getElementsByTagName("leiste")[0].style.left = 320*multiplikator+"px";
document.getElementsByTagName("leiste")[0].style.left = document.getElementsByTagName("leiste")[0].style.left.replace("px","")-1+"px";
}
else if( document.getElementsByTagName("leiste")[0].style.left.replace("px","") < 320*multiplikator )
{
//document.getElementsByTagName("leiste")[0].style.left = 320*multiplikator+"px";
document.getElementsByTagName("leiste")[0].style.left = document.getElementsByTagName("leiste")[0].style.left.replace("px","")+1+"px";
}
else
{
}
*/
while( document.getElementsByTagName("leiste")[0].style.left.replace("px","") > 320*multiplikator )
{
document.getElementsByTagName("leiste")[0].style.left = document.getElementsByTagName("leiste")[0].style.left.replace("px","")-1+"px";
window.setTimeout( "bewegen()", 50); // eigentlich müsste doch alle 50 millisekundend as ganze um einen pixel bewegt werden? :-/
}
while( document.getElementsByTagName("leiste")[0].style.left.replace("px","") < 320*multiplikator )
{
document.getElementsByTagName("leiste")[0].style.left = document.getElementsByTagName("leiste")[0].style.left.replace("px","")+1+"px";
window.setTimeout( "bewegen()", 50); // eigentlich müsste doch alle 50 millisekundend as ganze um einen pixel bewegt werden? :-/
}
}
</script>
</head>
<body>
<nav>
<leiste></leiste>
<ul>
<li onmouseover="bewegen(0)">
<a href="#">Menüpunkt</a>
</li>
<li onmouseover="bewegen(1)">
<a href="#">Menüpunkt</a>
</li>
<li onmouseover="bewegen(2)">
<a href="#">Menüpunkt</a>
</li>
<li onmouseover="bewegen(3)">
<a href="#">Menüpunkt</a>
</li>
<li onmouseover="bewegen(4)">
<a href="#">Menüpunkt</a>
</li>
</ul>
</nav>
</body>
</html>
