Question

我在jQuery中有一个级联动画。问题是：进入div我有两个不同的元素，有两个不同的类：linguetta_small，linguetta。如果对aniamte的元素具有类“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

每个（）我们遍历每个符合我们选择的元素。您不必考虑下一个要设置动画的元素，您可以单独处理每个元素。

因此，对于每个元素，我们检查它具有哪个类并相应地设置边距。

jQuery也有一个非常好的函数叫做delay，它比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);
});

将var更改为级联动画jQuery

1 个答案: