javascript - Delay fadeIn() in a for-loop -

i created menu jquery fadein animation, want open menu when mouse hover want fadein previous tab content. should works :

my mouse 1 third tab, first tab popin, second one, third little delay between each animation.

i tried jquery :

 $('.navigation li').hover(     // when mouse enters .navigation element        function () {         var tab = $(this).attr('id');         var numtab = tab.substring(2);         //fade in navigation submenu         ( var = 0; <= numtab ; i++ ) {           var domelt = '#et' + + ' ul';           $(domelt).fadein(300);   // fadein show sub cat menu           console.log(domelt);         }       },       // when mouse leaves .navigation element       function () {         var tab = $(this).attr('id');         var numtab = tab.substring(2);         //fade out navigation submenu         ( var = 0; <= numtab ; i++ ) {           var domelt = '#et' + + ' ul';           $(domelt).fadeout();   // fadein show sub cat menu         }       }     );  

as see on the live version of it, don't works, tabs fadein together, or seems to. how can add delay "one-after-one fadein effect"?

add dynamic delay -

 $(domelt).delay(i*100).fadeout(); 

demo ---> http://jsfiddle.net/abjkd/2/