逐字顯示動畫無法在IE中工作

Question

有誰知道爲什麼下面的代碼在IE中不起作用？ （在其他瀏覽器中工作不錯）

  div.hide().contents().each(function() { 
       var words; 
       if (this.nodeType === 3) { 
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>'; 
        $(this).replaceWith(words); 
       } else if (this.nodeType === 1) { 
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>'; 
       } 
      }); 

      // Remove any empty spans that were added 
      div.find('span').hide().each(function() { 
       if(!$.trim(this.innerHTML)) { 
        $(this).remove(); 
       } 
      }); 

      div.show().find('span').each(function(i) { 
       $(this).css('filter', 'alpha(opacity=40)'); 
       $(this).delay(400 * i).fadeIn(600); 
      }); 

任何解決方法，以逐字顯示效果在IE中工作？

編輯：

創建一個小提琴這裏：http://jsfiddle.net/8dh3F/

Answer 1

OK我找到了一種方法來顯示在IE中逐個字母（在其他瀏覽器的工作，以及），使用lettering.js庫：

HTML標記：

<div class='intro'> 
    <div class='starthidden intro'>{{ poem.introLine1 }}</div> 
    <div class='starthidden intro'>{{ poem.introLine2 }}</div> 
    <div class='starthidden intro'>{{ poem.introLine3 }}</div> 
    <div class='starthidden intro'>{{ poem.introLine4 }}</div> 
    <div class='starthidden intro'>{{ poem.introLine5 }}</div> 
    <br> 
</div> 
<div class='verse'> 
    <div class='starthidden trait'>{{ poem.traitLine1 }}</div> 
    <div class='starthidden trait'>{{ poem.traitLine2 }}</div> 
    <div class='starthidden trait'>{{ poem.traitLine3 }}</div> 
    <div class='starthidden trait'>{{ poem.traitLine4 }}</div> 
    <div class='starthidden trait'>{{ poem.traitLine5 }}</div> 
    <br> 
</div> 
etc 

JQuery的：

var div = $('.starthidden'); 
var delay = 400; 
var fadeIn = 600; 
div.lettering(); 
div.find('span').hide(); 
div.show().find('span').each(function(i) { 
    $(this).delay(delay * i).fadeIn(fadeIn); 
}); 

Answer 2

問題是這條線。它工作在IE9但不是8或7

this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';

它不喜歡this.innerHTML。謝天謝地，你正在使用jQuery！

用這個代替：

$(this).html(function(index, oldhtml){ 
    return '<span> ' + oldhtml.split(/\s+/).join(' </span><span> ') + ' </span>'; 
});