jQuery .animate（）在IE8中没有做任何事情 [英] jQuery .animate() not doing anything in IE8

问题描述

我有 div 的文字（＃text-write ），每个字符都是跨度定义。 div 绝对 ly 位置在<$内c $ c> relative ly position ed container div （ #typetext ）。这是预期的效果：

I have a div of text (#text-write), each character of which is spanned. The div is absolutely positioned inside a relatively positioned container div (#typetext). Here's the effect intended:

1. 动画内部 div （ #text-write ）到 opacity 0 400ms。


2. 为每个设置动画span 内部 div 一个接一个地到不透明度1 每个400毫秒。


3. 暂停5秒。


4. 返回1.

1. Animate inner div (#text-write) to opacity 0 for 400ms.
2. Animate each span inside inner div one after the other to opacity 1 for 400ms each.
3. Pause for 5 seconds.
4. Go back to 1.

我根本无法在IE8中完成这项工作。它适用于IE7及以下版本，IE9，其他主要且不起眼的（我所知道的）浏览器。我一直在拉我的头发尝试我在网上找到的所有东西（添加布局到绝对 ly 位置 ed内部 div ，玩过滤器，尝试淡出等等）过去5个小时左右。

I simply can't make this work in IE8. It works in IE7 and below, IE9, other major and obscure (that i know of) browsers. I've been pulling my hair trying out everything I found on the net (add layout to the absolutely positioned inner div, play with filter, try fade, etc.) for the last 5 or so hours.

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

The logic is running (I tried inserting an alert in the recursive call, and IE8 does the alert for each spanned letter and in the exact timing, even the pause), no errors in console, either.

但不透明度没有发生任何事情。它甚至都没有消失。它就在那里。

But nothing is happening to the opacity. It does not even disappear. It just stays there.

你能帮帮忙吗？

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

        });

推荐答案

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

我希望动画的< span> 元素当然是内联的。 显示将它们作为 inline-block 最后为ie8做了。非常感谢jeko，他在 http找到了解决方案：//www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

the <span> elements i wanted to animate were of course inline. displaying them as inline-block finally did it for ie8. thanks much jeko, who found the solution over at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

在此处发布给其他人在那里谁可能需要它而不是浪费尽可能多的时间。

posting here for anyone else out there who may need it and not waste as much time as i had.

这篇关于jQuery .animate（）在IE8中没有做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！