I have a menu with images that does an animation when the mouse is over one and out of the images (for each one).
The code is:
var nav = $('.menu');
nav.navs({
useHash:true,
defHash: '#!/page_splash',
//myComm - Menus Hover In
hoverIn:function(li){
$('a>span', li).stop().animate({'marginTop': -400},1000,'easeInOutExpo');
$('a>strong',li).stop().animate({height:0},800,'easeInOutExpo');
},
//myComm - Menus Hover Out
hoverOut:function(li){
if ((!li.hasClass('with_ul')) || (!li.hasClass('sfHover'))) {
$('a>span', li).stop().animate({'marginTop': marOver},1600,'easeOutElastic');
$('a>strong',li).stop().animate({height:414},1200,'easeOutBounce');
}
}
})
.navs(function(n){
$('#content').tabs(n);
});
But I need to do the function separately, one function for each item of the menu.