0

次のようなアニメーションのリストを実行しています。

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000)
    .queue(katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            alert('hi');
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

各アニメーションは関数として定義され、最終的に呼び出されkatz_logo()て魔法が開始されます。関数では、利用可能なkatz_subsites()それぞれをループしてから、最後の要素に到達した後に関数をliキューに入れようとしていますがkatz_video()、アラートを使用した実験でさえ期待どおりに機能していません。

だから-私が問題を抱えている部分は、その最後の値を取得する方法（ここで他の回答に従っていることを誓います）と、その後に何かをキューに入れる方法です。

どんな助けでも大歓迎です。ありがとう！

アップデート

コードの進行状況 -each()ステートメントの最後の要素をターゲットにして、次のアニメーションをキューに入れることにまだ行き詰まっています。

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            i.queue(katz_video);
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

作業コード:

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800, (i===subsitesLength-1 ? katz_video : (function(){})) );
    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();
4

1 に答える 1

1

関数の使い方が間違っていると思いますがqueue、探しているのは、完了時にアニメーション関数が実行するコールバックを追加することです。

$('#logo')
  .delay(500)
  .animate({opacity: 1}, 1000, katz_subsites);

コメントに応じて編集 - 繰り返しますが、同じ原則です。
コードを見ると、次の行に沿ったものがあります。

subsites.each(function(i) {
  $(this)
    .delay(i * 300)
    .animate({top:0, opacity: 1 }, 800, 
      (i===subsitesLength-1 ? katz_video : (function(){})) );
});
于 2012-11-15T15:22:35.420 に答える