단어 단위로 표시되는 단어 애니메이션이 IE에서 작동하지 않음

Question

다음 코드가 IE에서 작동하지 않는 이유를 알고 있습니까? 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); 
      }); 

모든 해결 방법을 (다른 브라우저에서 좋은 작업)?

편집 : 바이올린 여기 만든

는 : http://jsfiddle.net/8dh3F/

Answer 1

OK :

<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에서 작동하지만 그것은 this.innerHTML을 좋아하지 않는 것없는 8 또는 7

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

. 고맙게도 jQuery를 사용하고 있습니다!

사용이 대신 :

HTML 마크 업 : 나는 lettering.js 라이브러리를 사용하여, (물론 다른 브라우저에서 작업) IE에서 한 글자를 표시하는 방법을 발견

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