将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); 
});