Question

I have a main container div such as:

<div id="ourCustomers" style="height:300px;float:right;width:480px;">
        <div id="topOurCust" style="height:150px;width:480px;">
            <div id="topLeftCust" style="height:150px;width:240px;float:left;">
                <img id="tl1" src="/images/1.png" />
                <img id="tl2" src="/images/2.png" />
            </div>
            <div id="topRightCust" style="height:150px;width:240px;float:right;">
                <img class="one" src="/images/3.png" />
                <img class="two" src="/images/4.png" />
            </div>
        </div>
        <div id="btmOurCust" style="height:150px;width:480px;">
            <div id="btmLeftCust" style="height:150px;width:240px;float:left;">
                <img class="one" src="/images/5.png" />
                <img class="two" src="/images/6.png" />
            </div>
            <div id="btmRightCust" style="height:150px;width:240px;float:right;">
                <img class="one" src="/images/7.png" />
                <img class="two" src="/images/8.png" />                    
            </div>
        </div>
 </div>

What I want to do is to display one image in each square, then flip out the top left image with the other image in that div, wait like 4 seconds, then flip out the top right image with the other image in that div (and the same with the other divs).

I’ve tried using the jquery toggle method and the delay (sorry I don’t have that code handy, on other system), but what happened was that I was displaying both images, watching them both hide, then watching them both display. Plus I would have to write the logic for every image, and I’m sure there’s a way to do this easier.

Do I need to use the Javascript timer method? Can I use jQuery toggle like I was before?

Answer 1

I would recommend using the jQuery cycle plugin:

http://jquery.malsup.com/cycle/

Then you could instantiate the cycle plugins something like this:

$('#topLeftCust').cycle({ 
    delay: 0, 
    timeout: 16000 
});

$('#topRightCust').cycle({ 
    delay: 4000, 
    timeout: 16000 
});

$('#btmLeftCust').cycle({ 
    delay: 8000, 
    timeout: 16000 
});

$('#btmRightCust').cycle({ 
    delay: 12000, 
    timeout: 16000 
});