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中使用letters.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);
});

逐字显示动画不在IE中工作

2 个答案: