2

ボックスにフェードインしたいタイトルテキストがあります。その後、サブタイトルがその下にフェード インします。両方が表示されると、フェードアウトし、次のセットが同じようにフェードインします。

これは私が作成したものですが、これがどれだけうまく動作するか、つまりブラウザに多くの CPU が必要かどうかについては疑問があります。私の懸念の 1 つは、Javascript の再帰の深さです。

私は次のコードを持っています（CSSとHTML http://jsfiddle.net/ukewY/1/とともにjsfiddleにも含めました）

var no = 3;

function fadeText(id) {
  // Fade in the text
  $("#text" + id).animate({
    opacity: 1,
    left: '+=50'
  }, 5000, function() {
    // Upion completion, fade in subtext
    $("#subtext" + id).animate({
      opacity: 1,
    }, 5000, function() {
      // Upon completion, fade the text out and move it back
      $("#subtext" + id).animate({
        opacity: 0, 
      }, 1000, function() {
        $("#text" + id).animate({
          opacity: 0,
          left: '+=200'
        }, 3000, function() {
          // Yet again upon completion, move the text back 
          $("#text" + id).css("left", "19%");
          $("#subtext" + id).css("left", "10%")
          fadeText((id % no) + 1);
        });
      });
    });
  });
}

$(document).ready(function() {
  fadeText(1);
});

私の質問は、これが正しい方法であるかどうかです。または、これを行うためのより良い、おそらく非再帰的な方法がある場合は?

PS。これはウェブサイトのバナー用なので、大きくなりすぎても気にしませんid。

4

1 に答える 1

2

再帰は私には問題ないように思えますが、私が見つけた他のいくつかのことがあります:

  • おそらく、タイトルの数をスクリプトの先頭で指定するのではなく、動的に読み取りたいと思うでしょう。
  • 各タイトルで同じセレクタ $("#text" + id) と $("#subtext" + id) を 2 回使用しています。一度だけ実行し、変数に代入する必要があります。これは、関数呼び出しが 2 つではなく 1 つしかないことを意味します。
  • eq() セレクターを使用して $("text" + id) の必要性をなくし、より整理したい場合があります。
  • 値が 1 つしかない場合でも、animate() に渡すデータ マップがいくつかあります (具体的には "{opacity: 0,}")。これにより、一部のブラウザで問題が発生します。
  • 100%確かではありませんが、関数自体から呼び出すのは悪いことだと思います。setTimeout を使用する必要があります (また、eval() を使用して回避するために関数にいくつかのパラメーターを渡す必要がある場合は、無名関数を使用します)。
  • 関係ないとおっしゃっていましたが、ユーザーがページを開いたままにしておくと、id が大きくなりすぎる可能性があります (たとえば、電話に出て急いで出なければならないなど)。エラーに戻ってはいけません。
  • $(document).ready(DO STUFF) ではなく $(DO STUFF) を使用できます

私はこれらに気を配り、自由にコードを次のように調整しました。

function fadeText() {
    thistext = $text.eq(titleid);
    thissubtext = $subtext.eq(titleid);
    thistext.animate({
        opacity: 1,
        left: '+=50'
    }, 5000, function () {
        thissubtext.animate({
            opacity: 1
        }, 5000, function () {
            thissubtext.animate({
                opacity: 0
            }, 1000, function () {
                thistext.animate({
                    opacity: 0,
                    left: '+=200'
                }, 3000, function () {
                    thistext.css("left", "19%");
                    thissubtext.css("left", "20%");
                    if (titleid != $text.length - 1) {
                        titleid++;
                    } else {
                        titleid = 0;
                    }
                    setTimeout(fadeText, 0);
                });
            });
        });
    });
}

var titleid=0;

$(function () {
  $text = $("span.floating-text");
  $subtext = $("span.floating-subtext");
  fadeText();
});
于 2011-07-11T12:50:10.103 に答える