нужен совет по оптимизации кода выпадающего меню!
 

есть код! ну я понимаю что очень медленно работает! та и несовсем правильно написано! помогите оптимизировать как написать так что бы было все по правилам! не обезательно упиратся на jquery можно много чистого js

var mainNavUlLi = $("#mainNav ul li");
        
	$(mainNavUlLi).hover(function(){
	$(this).children("ul").css({"display":"block"}).animate({"opacity":"1"}).children("li").animate({"height":"20px"});
	
      },
	function(){
	$(this).children("ul").animate({"opacity":"0"}).children("li").animate({"height":"0px"}).end().children("ul").css({"display":"none"});
	}
	);

Arkinsstoun,
Ну имхо проще прописать всю анимацию в css
А переключателем менять только класс элемента
А в классах сss(ом) все свойства и аниме

ну да можно и так но мне нужно кросбраузерно! ie 7 -8 не потдерживает анимацию сss3

для IE7-8 сделать анимацию на JS, с условной активацией (условные комментарии, либо ветвление в коде)


PS opacity fade для IE можно сделать на css :)

ну акей! а что насчет оптимизации....может все по функция разбить или побольше данных в переменные?

Arkinsstoun,
Через скрипт - при hover/over - наткнетесь на проблему отмены предыдущих анимаций (посколь траблы при дбезге курсора на краю), правильное направление имхо в совете от melky,