逐字显示动画无法在IE中工作

有谁知道为什么下面的代码在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); 
      });

任何解决方法，以逐字显示效果在IE中工作？

编辑：

创建一个小提琴这里：http://jsfiddle.net/8dh3F/

来源

2012-07-26 François Koessler

你在控制台中遇到什么错误？什么不工作？ – 2012-07-26 11:40:56

我没有收到任何错误。问题是文字根本不显示！ – 2012-07-26 11:42:50

用fadeTo（1,600）代替fadeIn（600）可能会有所帮助 – Sem 2012-07-26 11:45:34

OK我找到了一种方法来显示在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

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

来源

2012-08-01 09:10:48

问题是这条线。它工作在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>'; 
});

来源

2012-07-27 01:44:28

你有没有设法在IE8或IE7中工作？我只是尝试使用IE8和文本不会出现：jsfiddle.net/Mb8gs – 2012-07-27 02:27:12

我收到一个错误：“意外的调用方法或属性访问”，和代码“{this.nodeType === 1）&&（突出显示this.appendChild（a）}“。 – 2012-08-01 01:53:42

逐字显示动画无法在IE中工作

回答

相关问题