3

概述

我正在创建一系列 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>
4

4 回答 4

1

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

于 2013-03-13T19:21:32.053 回答
1

不久前我做了类似的事情，代码（来自内存）是这样的：

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（版本？）没有问题。

Varst_ref并allowCycle允许在必要时停止循环。

于 2013-03-13T20:30:19.283 回答
0

-------------- 阅读有关如何修复 FadeIN 和 FadeOUT 功能的信息 ---------------

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

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

于 2013-03-13T19:57:22.317 回答
-1

只是为了快速思考问题所在：

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

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

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

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

于 2013-03-13T19:30:37.570 回答