jQueryでテキストのようなバナーをフェーディング

Question

私はボックスにフェードインしたいタイトルのテキストがあります。 その後、字幕がその下にフェードインする必要があります。 両方が表示されたら、それらはフェードアウトし、次のセットは同じ方法でフェードインする必要があります。

これは私が作成したものですが、ブラウザの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が大きくなることを心配しません。

Answer 1

再帰は私には罰金だが、私が見つけたいくつか他のものがあります。

• はおそらく動的ではなく、スクリプトの先頭にそれらを指定するよりもタイトル数を、読みたいです。
• 同じセレクタ$（ "＃text" + id）と$（ "＃subtext" + id）を各タイトルで2回使用しています。一度だけ実行し、変数に代入する必要があります。これは、2つではなく、1つの関数呼び出ししか持たないことを意味します。
• $（ "text" + id）の必要性を排除し、それを細かくするためにeq（）セレクタを使用することができます。
• アニメーションに渡すデータマップが2つあります1つの値（具体的には「{不透明度：0、}」）があるにもかかわらず、コンマで区切ります。これにより、一部のブラウザで問題が発生します。
• 私は100％確信していませんが、自分自身から関数を呼び出すのが悪いと思うので、setTimeoutを使用してください（eval（）を使用しないようにいくつかのパラメータを渡す必要がある場合は匿名関数を使用してください）
• あなたはそれが問題ではないと知っていると知っていますが、IDが大きすぎるということは、ユーザーがあなたのページを開いたままにしてしまった場合に起こる可能性があります。彼らは誤りに戻ってはならない。

  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(); 
  }); 
  

  ：私はこれらの車を取り、次のコードをいじるの自由を取った

あなたは$（DO STUFF）ではなく$より（ドキュメント）.ready（DO STUFF）を使用することができます