mot par l'animation d'affichage de texte ne fonctionne pas dans IE

Question

Quelqu'un sait-il pourquoi le code suivant ne fonctionne pas dans IE? (fonctionnant bien dans d'autres navigateurs)

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

Une solution de contournement pour que l'effet d'affichage mot à mot fonctionne dans IE?

EDIT:

créé un violon ici: http://jsfiddle.net/8dh3F/

Answer 1

OK J'ai trouvé un moyen d'afficher la lettre par lettre dans IE (travaillant dans d'autres navigateurs aussi bien), en utilisant la bibliothèque lettering.js:

balisage 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

Le problème est avec cette ligne. Il travaille dans IE9 mais pas 8 ou 7.

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

Ce n'est pas goût this.innerHTML. Heureusement, vous utilisez jQuery!

utiliser ceci:

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