Question

Does anybody know why the following code isn’t working in IE? (working nice in other browsers)

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

Any workaround to have the word by word display effect working in IE?

EDIT:

Created a fiddle here: http://jsfiddle.net/8dh3F/

Answer 1

OK I found a way to display letter by letter in IE (working in other browsers as well), using the lettering.js library:

HTML markup:

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