0

UL.chapters が 'slideDown' の場合、最初の 'chapters LI' で 'left' プロパティを 20px にアニメートし、次にアニメートして 0px に戻し、次に 2 番目の LI で同じことを行い、次に 3 番目で、というように続きます。 . 私のコードでは、UL.chapters がスライドした直後にすべてアニメーション化します。一度に 1 つずつアニメーションを実行するにはどうすればよいでしょうか。

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

コードが更新されました。

4

2 に答える 2

3

これを試して：

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}

これは最初にスライド アニメーション関数を呼び出し、<li>次に開始位置にスライドして戻すアニメーションのコールバックで、次の で関数を呼び出します<li>。

実際のデモは次のとおりです。http://jsfiddle.net/CBNgR/

于 2010-08-20T17:46:19.987 に答える
0

コードの 4 行目が $('.chapters LI') ではなく $('chapters LI') になっていることに気付きましたか?

また、ここで繰り返しています。これを試して：

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

また、LI が絶対位置に設定されていることを確認してください。そうしないと、左側のアニメーションに問題が発生します。

于 2010-08-20T17:17:28.553 に答える