1

jQueryにカスケードアニメーションがあります。問題は次のとおりです。divに、2つの異なるクラスを持つ2つの異なる要素があります：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には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);
});
于 2012-09-07T07:59:51.663 に答える