在for循環中延遲fadeIn（）

Question

我創建了一個帶有Jquery FadeIn動畫的菜單，我想在鼠標懸停時打開菜單，但我也希望淡化之前的選項卡內容。 這應該是這樣的：

我的鼠標是第三個選項卡，第一個選項卡popin，然後是第二個，然後是第三個，每個動畫之間有一點延遲。

我試圖用jQuery做到這一點：

$('.navigation li').hover(
    // When mouse enters the .navigation element 

     function() { 
     var tab = $(this).attr('id'); 
     var numTab = tab.substring(2); 
     //Fade in the navigation submenu 
     for (var i = 0; i <= numTab ; i++) { 
      var domElt = '#Et' + i + ' ul'; 
      $(domElt).fadeIn(300); // fadeIn will show the sub cat menu 
      console.log(domElt); 
     } 
     }, 
     // When mouse leaves the .navigation element 
     function() { 
     var tab = $(this).attr('id'); 
     var numTab = tab.substring(2); 
     //Fade out the navigation submenu 
     for (var i = 0; i <= numTab ; i++) { 
      var domElt = '#Et' + i + ' ul'; 
      $(domElt).fadeOut(); // fadeIn will show the sub cat menu 
     } 
     } 
    ); 

當你在它the live version看，它真的不工作，所有的標籤一起淡入，或好像。我如何添加延遲來獲得「一個接一個的淡入淡出效果」？

Answer 1

添加動態延遲這樣的 -

$(domElt).delay(i*100).fadeOut(); 

演示--->http://jsfiddle.net/abJkD/2/

Answer 2

你可以鏈變淡：

function() { 
    var tab = this.id; 
    var numTab = +(tab.substring(2)); 
    //Fade in the navigation submenu 
    var i = 0; 
    function doFade() { 
     if (i === numTab) return; 

     // In the fiddle provided, the element id values 
     // start at 1, not zero 

     var domElt = '#Et' + (i + 1) + ' ul'; 
     i = i + 1; 
     $(domElt).fadeIn(300, doFade); 
    } 
    doFade(); 
    }, 

（同樣地，對於淡出）