將var更改爲級聯動畫jQuery

Question

我在jQuery中有級聯動畫。問題是：進入div我有兩個不同的類有兩個不同的類：linguetta_small，linguetta。 如果aniamte元素的class爲「linguetta」，則必須爲5px的邊距，而如果該類爲linguetta_small，則剩餘邊距必須爲40px。我怎麼能做到這一點？ 這是我的HTML

<div id="linguetta_next"> 
    <div class="linguetta" id="linguetta_next1 moved" style="margin-left:100%;"> 
     <p class="tit_linguetta">azienda</p> 
    </div> 
    <div class="linguetta_small" id="linguetta_next2 moved" style="margin-left:100%; margin-top:10px; background:#b0f271;"> 
     <p class="tit_linguetta_small">staff</p> 
    </div> 
    <div class="linguetta_small" id="linguetta_next3 moved" style="margin-left:100%; margin-top:10px; background:#0a5a0a;"> 
     <p class="tit_linguetta_small" style="color:#fff;">risorse umane</p> 
    </div> 
</div> 

這是我的jQuery代碼：

function movePageCenter(id, old_id) { 
    var margin = "1%"; 
    $("#linguetta_next div").each(function(i) { 
     var el = $(this); 
     setTimeout(function() { 
      el.animate({ 
       marginLeft: margin 
      }, 400, function() { 
       if (el.next(".linguetta_small").hasClass('linguetta_small')) { 
        margin = "40px"; 
       } 
       else { 
        if (el.next(".linguetta").hasClass('linguetta')) { 
         margin = "5px"; 
        } 
       } 
      }); 
     }, i * 200); 
    }); 

}); 
} 

Answer 1

隨着通過符合我們選擇每個elemeat每（），我們循環。你不必考慮下一行的元素是動畫的，你可以單獨處理每個元素。

因此，每一個元素我們都會檢查它有哪個類，並相應地設置邊距。

此外，jQuery有一個非常漂亮的函數稱爲延遲，比setTimeout函數更容易使用。

$("#linguetta_next div").each(function(i) { 

     var $el = $(this); 
     var margin; 

     if ($el.hasClass('linguetta_small')) { 
      margin = 40; 
     } else { 
      margin = 5; 
     } 


     $el.delay(i * 200).animate({ 'margin-left': margin }, 400); 
});