3

このアニメーションを再現しようとしています

http://tympanus.net/Tutorials/AnimatedContentMenu/

順番に上にスライドする以外に、メニュー項目をアニメーション化できません

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each( function() {
                $(this).animate(
                    {top:'0px'},
                    {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                }); 
        });
    }
});

このように、メニュー項目は同時にアニメーション化されます...何が問題なのですか?

4

4 に答える 4

10

キューは要素ごとに存在するため、ここでは実際には何もキューに入れられません。そのため、すべてが一度にアニメーション化されます。ただし、これを行うにはいくつかの方法があります。少数のアイテムでこれを行う簡単な方法の 1 つは、次の.delay()ように を使用することです。

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function(i) {
            $(this).delay(i*200).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
            }); 
        });
    }
});

ここでデモをテストできます。

これが行うことは、アニメーションを 200 ミリ秒遅らせることです *.each()反復内の要素のインデックス。したがって、最初のアニメーションは瞬時に、2 番目は 200 ミリ秒後、次の 200 ミリ秒はその後などです。これをお勧めする理由は、遅延に 200 ミリ秒を使用します。より小さな数値を使用して、アニメーションを少しオーバーラップさせることができます。これは、求めている効果のようです。

これを行う別の方法 (より詳細で、シーケンシャルのみで、重複を許可しない) を使用.queue()して、独自のビルドを作成することもできます。次に例を示します。

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function() {
            $(document).queue(function(n) {
              $(this).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                complete: n //call the next item in the queue             
              }); 
            });
        });
    }
});

ここでそのバージョンをテストできます。

于 2011-07-03T11:07:36.167 に答える
0

これは、シーケンシャル アニメーションに使用したものです。

for (var i = 1; i < 10; i++) {
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () {
        var id = this
        setTimeout (function () {$(id).css('color', 'lightgray');}, 1500);
    });
}
于 2012-11-24T19:50:19.287 に答える
0

キューは要素ごとに一意です。つまり、各要素には独自の独立したキューがあります。各アイテムのアニメーションが終了した後にコールバックを使用します。例: 5 つの li タグがある場合、最初の 4 つのタグに特定のクラスを使用し、そのクラスのアニメーションにコールバックを追加して、次の要素のアニメーションを実行します。

于 2011-07-03T10:18:20.973 に答える