Mootools-Animation spinnt

[yss]

Hallo
Ich bin gerade dran, eine Art Navigations-Bar auf meiner Seite einzubauen. Damit sie nicht so viel Platz weg nimmt will ich sie beim Start nur ein bisschen Sichtbar machen und mit einem onmouseover dann eine kleine Animation starten, welche die Bar hinausfährt und per eigenem JS sie dann erstmal fixiert.
Doch leider spinnt die Animation ein bisschen, warum?
Hier ein kleines Video (mp4-Format): [video]http://dl.dropbox.com/u/202259/Mootools-Problem.mp4[/video]

Und hier der Quellcode:

<div id="navBar" onmouseover="slideNavBarOut()">
	<img src="img/backButton.png" id="backButton" alt="BackButton" />
	<input type="text" id="suche" name="suche" placeholder="Suche..." />
	<button id="navBar_suchButton" type="submit" id="s_button1">Suchen</button>
	<button id="navBar_erwButton" id="s_button2">Erweitern</button>
	<img src="img/pullUp.png" alt="pullUp" id="pullUp" />
</div>

#navBar{
	margin: 0;
	width: 700px;
	height: 50px;
	margin-left: 250px;
	margin-top: 55px;
	background-image: url(../img/navBar.png);
	z-index: 1;
	position: fixed;
}

function slideNavBarOut(){
	var myEffect = new Fx.Morph('navBar', {duration: 'long', transition: 'bounce:out'});
 	myEffect.start({
    'marginTop': [55, 95],
    });
    
    $('backButton').style.visibility = 'visible';
    $('pullUp').style.visibility = 'visible';
    $('suche').style.visibility = 'visible';
    $('s_button1').style.visibility = 'visible';
    $('s_button2').style.visibility = 'visible';
    
    with ( $( "navBar" ) ) {
		style.marginTop = "95px"; 
	}
}