JavaScriptアニメーションの改善

Question

駅のテキスト効果を作成しようとしています。

私がこれまでに達成したものをここに見ることができます：http://www.jaspreetkaur.com/chatter/ここ

コードです、ご参考のために：http://jsfiddle.net/alokjain_lucky/ARhvu/

問題：効果は、非常に遅い実行されている

1. 与えていませんそれは非常に滑らかで現実的な効果です。
2. IE7で動作しない
3. 私が作成したスクリプトは改善できると思います。

問題を解決するための専門家の助言を提供してください。

感謝:)

---

更新：スクリプトは、テキストのアニメーションのためである

は、私が使用しているJavaScriptコードが続き

"重要なおしゃべりに取得"：

$(document).ready(function() {

var newSrt = ''; 
for (var i=0; i<str.length; i++) { 
    if (str[i] != ' ') { 
     newSrt += '<span>'+str[i]+'</span>'; 
     //newSrt += '<span> </span>'; 
    } else { 
     newSrt += '<span class="nobg">'+str[i]+'</span>'; 
     //newSrt += '<span class="nobg"> </span>'; 
    } 
} 
$('.animate').html(newSrt); 


scroll(); 

});

var str = ('The quick brown fox jumps over the lazy dog').toUpperCase(); 
var symtype=new Array(" ","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"); 

var symarray=new Array(); 

for (var i=0; i<str.length; i++){ symarray[i]=" "; } 

function scroll(){ 
    for (var i=0; i<str.length; i++){ 
     if (symarray[i]!=str.substring(i,i+1)) { 
      for (var x=0; x<symtype.length; x++) { 
       if (symarray[i]==symtype[x]) { 
        symarray[i]=symtype[x+1]; 
        break; 
       } 
      } 
     } 
    } 

    for (var i=0; i<str.length; i++) { 
     $('.animate').find('span').eq(i).html(symarray[i]);  
    } 

    setTimeout('scroll()',10); 

} 

コードバッターを記述しています。

---

アップデート2スクリプトは、現在IE7で​​働いている

、それはすべてのブラウザで、あまりにも高速です、（のみ）私はsetTimeoutメソッドを変更することで、それはゆっくりと行うことができますが、それはFirefoxであまりにも遅いです、私更新

---

驚くべきことに放火犯をFirefoxの9.0.1を使用していますFirefoxでスクリプトを遅くしてFirefoxをオフにして、Firefoxの速度問題を解決しています。

はIE7の問題ではCSSに関連していますが、これは解決できると思います。

残っているのは、ウェブサイトの他の場所で再利用できるようにスクリプトを改善することだけです。

Answer 1

私はあなたのjsFiddleをここに修正しました：http://jsfiddle.net/jfriend00/VWXFp/これを実行すると、今でもIEでは動作するようです。

1. 私は$(document).ready()ブロックを最後に移動したので、グローバルが最初に定義されていました。これはjsFiddleが設定されていたために必要でした。
2. テキスト文字列ではなく、直接関数参照を使用するようにsetTimeout(scroll,100);に変更しました。
3. 私は「ノーラップ（ボディ）」
4. に左上に設定jsFiddleを変更100msの
5. にタイマーのタイムアウト谷を変更し、私は大規模な、より効率的にループを設定し、あなたの手紙を変更しました。あなたはすべての文字を一度検索してループするだけでなく、一文字ごとに一文字のスパンを再検索していました。これは、一部のブラウザではパフォーマンス上の問題でした。 ＃5の場合
は

、私はこれから変更：これに

for (var i=0; i<str.length; i++) { 
    $('.animate').find('span').eq(i).html(symarray[i]);  
} 

：str.length回の代わりに一度だけ$('.animate').find('span')を評価

$('.animate').find('span').each(function(index, element) { 
    $(this).html(symarray[index]); 
}); 

。