如何在數組迭代時停止數組迭代，如果索引包含要迭代的內部數組，則繼續

Question

我想迭代數組，然後逐漸淡出每個數組。但是，如果該數組中的索引應該包含它自己的數組，我希望外部數組停止;然後動畫它的內部數組;然後繼續。

我提供了一個jsfiddle

我知道這是各種麪條的權利，但我打算把它變成一個調用的if語句其他功能的功能。然而現在我對如何讓它正常停止感到困惑。

$(document).ready(function() { 

// start 
var elements = $('.switch'); 

elements.each(function(index) { 
    var element = $(this); 

    setTimeout(function() { 
     element.fadeIn(1000, function() { 

      if(element.has('.section')){ 

       var innerEls = $('.section'); 
       innerEls.each(function(i) { 
        // stuff 
        var inner = $(this); 
        setTimeout(function() { 
         element.stop(); 
         inner.fadeIn(1000).delay(2000).fadeOut(1000); 
        }, 4000 * i); 
       }); 
      } 

     }).delay(1000).fadeOut(1000); 
    }, 2000 * index); 

}); 

}); 

<div class="switch">This is &lt;div&gt; number 1</div> 
<div class="switch">This is &lt;div&gt; number 2</div> 
<div class="switch">This is &lt;div&gt; number 3 
    <div class="section">this</div> 
    <div class="section">needs to</div> 
    <div class="section">show</div> 
</div> 
<div class="switch">This is &lt;div&gt; number 4</div> 
<div class="switch">This is &lt;div&gt; number 5</div> 

Answer 1

你可以做

switchelements(elements); 

function switchelements(e){ 
    e.eq(0).delay(1000).fadeIn(1000,function(){ 
     if($(this).children(".section").length>0){ 
      var inner=$(this).children(".section"); 
      switchelements(inner); 
     } 
     else{ 
      $(this).delay(1000).fadeOut(1000,function(){ 
       if(e.length>=2){ 
        e.splice(0,1); 
        switchelements(e); 
       }else{ 
        if($(this).parent(".switch").next("switch")){ 
         $(this).parent(".switch").delay(1000).fadeOut(1000,function(){ 
          switchelements($(this).nextAll(".switch")); 
         }); 
        } 
       } 
      }); 
     } 
    }); 
}  

http://jsfiddle.net/x2s8P/3/