jQuery .animate（）在IE8中没有做任何事情

Question

我有一个div的文字（#text-write），其中每个字符都是span。 div在absolute ly position ed容器relative（position）内div #typetext div。这是预期的效果：

1. 将内部#text-write（opacity 0）动画为span 400毫秒。
2. 将内部div内的每个opacity 1一个接一个地动画到absolute，每个动作400毫秒。
3. 暂停5秒钟。
4. 回到1。

我根本无法在IE8中完成这项工作。它适用于IE7及以下版本，IE9，其他主要且不起眼的（我知道的）浏览器。我一直在拉我的头发试试我在网上找到的所有东西（添加position ly div ed inner filter的布局，玩alert，尝试淡化，等）最近5个小时。

逻辑正在运行（我尝试在递归调用中插入alert，IE8为每个span个字母执行opacity，并且在确切的时间内，甚至是暂停） ，控制台也没有错误。

但 jQuery(function() { // span each letter in text var textType = jQuery('#text-write').remove().text(), textTypeLength = textType.length, fadeSpeed = 400, fadePause = 5000, textSpanned = ''; for (i=0;i<textTypeLength;i++) textSpanned += '<span>' + textType.charAt(i).replace(' ','&nbsp;') + '<\/span>'; jQuery('#typetext').append('<div id="text-write">'+ textSpanned + '<\/div>'); // fade phrase logic function fadeType(){ var letters = jQuery('#text-write span').animate({opacity: 0}, fadeSpeed), i=0; (function(){ jQuery(letters[i++]).animate({opacity: 1}, fadeSpeed, arguments.callee); })(); } // make it happen fadeType(); setInterval(function(){fadeType();},fadePause + fadeSpeed + (textTypeLength*fadeSpeed)); }); 没有发生任何事情。它甚至没有消失。它就在那里。

你能帮忙吗？

{{1}}

Answer 1

我在http://api.jquery.com/fadeTo/#dsq-cite-119679059

找到了答案

我想要制作动画的<span>元素当然是内联的。 display inline-block最终为ie8做了{{1}}。非常感谢jeko，他在http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

找到了解决方案

在这里张贴给那些可能需要它的人，而不是浪费尽可能多的时间。

Answer 2

另外，我使用动画以百分比移动项目。 IE不支持百分比。我将动画从百分比切换到像素，它工作得很好。