隐藏/显示在 Internet Explorer 中不起作用

Question

概述

我正在创建一系列 id 名为“cda2012_#”的 div，其中 # 代表顺序。它们应该出现 8.5 秒，并被序列中的下一个 div 替换。这些 div 将无限循环。下面的脚本在 div 加载后在页面底部执行。

想要的效果

由 id 标记的特定 div 将在彼此之间按顺序无限循环。 （在 FF/Chrome 中工作）

IE9 出错

第一个 div 显示正常，但第二个 div 不会显示，也不会循环回到序列中的第一个 div。

UDPATE： IE9 中的问题是序列中的下一个 div 不显示。在 Firefox/Chrome 中，div 将无限循环 8.5 秒。

更新 2： 根据请求在 div id 和脚本中从 - 切换到 _。仍然没有在 IE9 中按顺序拉下一个 div。

更新 3：根据建议更新了隐藏的 divs 元素以具有背景颜色。这不会影响 IE9 中 div 之间的循环。

更新 4： 封装代码使用：j(function() {...});

---

解决方案

• 在j(function() {...})中封装代码；
• 将“-”（连字符）切换为“_”（下划线）

由于@Beetroot-Beetroot 的输入而得到修复

---

<script>
    var divs = j('div[id^="cda2012_"]').hide(),
        i = 0;

    (function cycle() { 
        divs.eq(i).fadeIn(450)
            .delay(8500)
            .fadeOut(450, cycle);

            i = ++i % divs.length;
    })();
</script>

这是一个出现在 HTML 脚本上方的示例 div：

<div id="cda2012_1">
    <div id="table-hd">Project Title</div>
    <div id="table-bd">
        <span id="table-q">
            <img align="middle" alt="" src="http://aiawa.org/associations/12413/files/cda2012-hogue.png" />
            <hr id="table-hr" />
            Firm: <a href="http://lmnarchitects.com/" target="_blank">LMN</a><br />
            Photo: <a href="http://lmnarchitects.com/" target="_blank">LMN</a></span><span id="table-v"><br />
            <center>
                <span id="table-h2">Did you know?</span>
            </center><br />
            Students and faculty at Central Washington University can assemble wind turbines or test photovoltaic technologies on the &quot;working roof&quot; of their 92,000GSF LEED Platinum facility. <br />
        </span>
    </div>
</div>

Answer 1

我相信 fadeIn[Out] - 影响 CSS 不透明度 - 在旧版本的 IE 中不起作用。

Answer 2

只是对问题所在的一些快速想法：

• 您使用的 IE 浏览器是什么版本？尝试更新。

• 使用来自 google 的最新版本的 JQuery。

• *可能存在问题“因为浏览器理解 javascript 而不是独立的 jQuery sn-ps。jQuery 将我们的代码转换为普通的 javascript 代码，以便浏览器能够解释我们所说的内容。Javascript 库是快捷方式。 如果您要在库本身加载之前加载库插件，则该插件将被浏览器视为一堆 mumbo-jumbo。在加载库之前，这段代码的 sn-p 意味着绝对没有任何意义。” *（来源：http://css-plus.com/2010/03/6-steps-to-take-if-your-jquery-is-not-working/）

• 希望这有帮助，IE 无论如何都是染色浏览器。祝你好运。

Answer 3

------------- 阅读这篇关于如何修复 FadeIN 和 FadeOUT 功能的文章---------------

它与 IE 进行不透明度和颜色更改所需的“过滤器”有关。

链接:: http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Answer 4

不久前我做了类似的事情，代码（从记忆中）是这样的：

j(function() {
    var projectContainer = j("#.....");//the parent div
    projectContainer.find('.projects').hide();//select by class
    var t_ref, allowCycle = true;
    function cycle() {
        projectContainer.find('.projects:last').hide().prependTo(projectContainer).fadeIn(450);
        if(allowCycle) t_ref = setTimeout(cycle, 8950);
    };
});

据我所知，IE（版本？）没有问题。

变量t_ref 和allowCycle 允许在必要时停止循环。