Hide/show not working in Internet Explorer

Question

Overview

I'm creating series of divs with id named "cda2012_#" where # represents the order. They should appear for 8.5 seconds and be replaced by the next div in the sequence. These divs will cycle indefinitely. The script below executes at the bottom of the page, after the divs have loaded.

Desired Effect

Specific divs flagged by id will cycle between each other, in order, indefinitely. (Works in FF/Chrome)

Error in IE9

First div displays fine but second div won't display, nor will it cycle back to the first div in the sequence.

UDPATE: The issue in IE9 is that the next div in the sequence doesn't show. In Firefox/Chrome, the divs will cycle indefinitely for 8.5 seconds.

UPDATE 2: Switch from - to _ in div id and script, per request. Still doesn't pull next div in sequence in IE9.

UPDATE 3: Updated divs elements being hid to have background colors, per suggestions. This doesn't have an impact on cycling between the divs in IE9.

UPDATE 4: Encapsulated code using: j(function() {...});

---

Solution

• Encapsulating code in j(function() {...});
• Switching "-" (hyphen) to "_" (underscore)

Fixed thanks to input from @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>

Here is an example div that would appear above the script in the HTML:

<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

I did something similar a while back and the code (from memory) was something like this :

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

As far as I'm aware IE(version?) had no problems with it.

Vars t_ref and allowCycle allow the cycle to be stopped if necessary.