jquery - 逐字显示动画在 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

问题在于这条线。它适用于 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>';
});

Answer 2

好的，我找到了一种在 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

查询：

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