Усовершенствования в анимации JavaScript

Question

Я пытаюсь создать текстовый эффект станции.

Здесь можно увидеть то, что я достиг до сих пор: http://www.jaspreetkaur.com/chatter/

вот код, для справки: http://jsfiddle.net/alokjain_lucky/ARhvu/

вопросы:

1. Эффект работает очень медленно, не давая это очень плавный и реалистичный эффект.
2. Не работает в IE7
3. Я думаю, что скрипт, который я создал, можно улучшить.

Просьба представить ваш советник, чтобы решить проблемы.

Спасибо :)

---

Update:

Скрипт для анимации текста "Получить болтовню, что имеет значение"

Ниже приводится код 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); 

} 

Надеюсь, что описывает тестовое тестовое сообщение.

---

Update 2

Скрипт работает в IE7 сейчас, это слишком быстро во всех браузерах, я могу сделать это медленно, изменяя SetTimeout, но это слишком медленно в Firefox (только), я я использую Firefox 9.0.1

---

Update 3

удивительно поджигатель делает скрипт медленным в Firefox, отключая firebug, устраняет проблему с пропускной способностью в Firefox.

в IE7 проблема связана с CSS, который, я думаю, я смогу решить.

Осталось только подумать, чтобы улучшить сценарий, чтобы сделать его многоразовым для других мест на веб-сайте.

Answer 1

Я установил ваш jsFiddle здесь: http://jsfiddle.net/jfriend00/VWXFp/, чтобы запустить его, и он теперь работает, даже в IE.

1. Я переместил $(document).ready() блок до конца так Глобал определяются первым, который требуется только из-за того, как вы имели jsFiddle сконфигурированные.
2. Я изменил на setTimeout(scroll,100);, чтобы использовать ссылку на прямую функцию вместо текстовой строки.
3. Я изменил таймаута юдоль на таймере 100мс
4. Я изменил настройки jsFiddle в верхнем левом углу, чтобы «не обертка (тело)»
5. Я изменил свой параметр цикла, чтобы быть более эффективным в широком масштабе письмо. Вы переименовывали только один пробел для каждой буквы, вместо того, чтобы находить их все один раз и просто перебирать их. В некоторых браузерах это может быть проблемой производительности.

Для # 5, я изменил от этого:

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

к этому:

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

который оценивает $('.animate').find('span') только один раз вместо str.length раз.