1

我在 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);
    });

});
}
4

1 回答 1

1

使用 each() 我们遍历每个适合我们选择的元素。您不必考虑下一个要动画的元素，您可以单独处理每个元素。

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

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);
});
于 2012-09-07T07:59:51.663 回答