jQuery .animate() 在 IE8 中没有做任何事情

Posted 2023-05-08

【中文标题】jQuery .animate() 在 IE8 中没有做任何事情

【英文标题】：jQuery .animate() not doing anything in IE8

【发布时间】：2011-11-23 11:38:08

【问题描述】：

我有一个 div 的文本 (#text-write)，每个字符都是 spanned。 div 是 absolutely positioned 在 relatively positioned 容器 div (#typetext) 内。这是预期的效果：

将内部 div (#text-write) 动画化为 opacity 0 400 毫秒。 将内部div 中的每个span 一个接一个地设置为opacity 1，每个动画持续400 毫秒。 暂停 5 秒。 回到 1。

我根本无法在 IE8 中完成这项工作。它适用于 IE7 及更低版本、IE9、其他主要和晦涩的（我知道的）浏览器。我一直在努力尝试我在网上找到的所有内容（将布局添加到 absolutely positioned 内部 div，与 filter 一起玩，尝试淡入淡出等）最后 5 或几个小时。

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

但是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));

        );

【问题讨论】：

尝试使用过滤器：alpha(opacity=70);在即 8

谢谢，kim，但我已经尝试过了，但它不起作用。 ：/还有其他想法吗？谢谢

你能在 jsbin 或 jsfiddle 或其他地方得到一个工作版本吗？

你好！不好意思，刚看到这个。 fin'lly 找到了解决方案并将其发布在下面。无论如何，谢谢，真的'珍惜它。过得更好！

【参考方案1】：

我在http://api.jquery.com/fadeTo/#dsq-cite-119679059找到了答案

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

找到了解决方案

在这里为可能需要它的其他人发帖，而不是像我一样浪费太多时间。

【讨论】：

将 display: block; 更改为 display: inline-block 成功，谢谢。

【参考方案2】：

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