Typo3 Menü Easing-Effekt?

[lacosamia85]

Hallo zusammen,
erstmal danke fürs reinschauen
ich habe mir in Typo3 ein Jquery-Menü gebastelt.
doch beim "fade in" oder "fade out" möchte ich dass es etwas "bouncet!"
Nun vorweg ich bin absoulter "jquery-newbie"....
Also in meinem Typo3 Ordner "JS" stecken die Dateien:

"general.js" --- Menü-Funktionen...

jQuery("document").ready(function(){
	jQuery(".nav-ebene-zwei").hide(); 
    jQuery(".nav-ebene-eins li").hover(function(){
    	jQuery(this).addClass('pretty-hover').children("ul").fadeIn("fast");
    	}
		,function(){
				jQuery(this).removeClass('pretty-hover').children("ul").fadeOut("slow");
        });  
});

"jquery.min.js"
In der ist glaub zu viel drin

Dann habe ich mir noch die "jquery.easing.1.3.js" besorgt und auch in diesen Ordner getan... und per Typoscript inlcudet:

  includeJS.file71 = fileadmin/template/js/jquery.min.js
  includeJS.file80 = fileadmin/template/js/general.js
  includeJS.file91 = fileadmin/template/js/jquery.easing.1.3.js

Folgendes habe ich mal probiert in der "general.js"

$(document).ready(function(){

    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

Doch danach geht gar nichts mehr.... und ich weiss nicht warum...

hier noch meine CSS von der navi

/* Navigation */
/* Ebene Eins */

ul.nav-ebene-eins {
	padding:0;
	margin:0;
	list-style-type:none;
	width:960px;
}

ul.nav-ebene-eins li {
	padding:0;
	margin:0;
	display:inline;
	float:left;
	position:relative;
}

ul.nav-ebene-eins li a {
	display:block;
	width:156px;
	font-size:15px;
	text-align:center;
	line-height: 40px;
	background:transparent url(style_FILES/navi-hg.jpg) center center repeat-x;
	color:#000;
	border-right:1px solid #aaaaa8;	

	

}

ul.nav-ebene-eins li a:hover {
	
background:transparent url(style_FILES/navi-hg2.jpg) center center repeat-x;

}

ul.nav-ebene-eins li a.active {
background:transparent url(style_FILES/menu_sub_bg2.png) repeat;
}



/* Navigation */
/* Ebene Zwei */

ul.nav-ebene-zwei {
	padding:0;
	margin:0;
	
}
ul.nav-ebene-zwei li {
	clear:left;
	
}
ul.nav-ebene-zwei li a {
	
	border-right:none;
	text-align:center;
	background: transparent url(style_FILES/menu_sub_bg.png) repeat ;  !Important;
	
	color:#303132;


}

ul.nav-ebene-zwei li a:hover {

	color:#000 !Important;
	background:transparent url(style_FILES/menu_sub_bg3.png) repeat;
}

Würde mir vllt jemand helfen?
Ich wäre unendlich dankbar...

 

[lacosamia85]

hat keiner eine idee?