Question

I have a page where I am cycling through a set of list elements using jquery fadeout() & fadein().

Everything works fine, except I would now like to make it so:

• the user can click a separate element that represents a li in the rotation.
• When they click the element, the current animation cycle is stopped,
• the corresponding content li is loaded
• the animation resumes.

I believe I need to do this with jquery queues, but was wondering if there was an easier solution I’m overlooking.

Here is my code:

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay);

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function () {
        $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");            
        (j == jmax) ? j = 0 : j++;            
        cycleThru();
    });

};

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function () {

    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

Corresponding HTML —

<ul id="rotator">
<li id="first">
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
</ul>
<ul id="rotator_pager">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

Answer 1

So, I stepped away from it for a few mins and figured it out. You do need to use the Jquery queue’s but it was not nearly as complicated as I thought. Here’s the solution for others:

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")")
        .fadeIn(fadetime)
        .delay(delay)
        .fadeOut(fadetime, function () {
            $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
            (j == jmax) ? j = 0 : j++;
            cycleThru();
        });

};

//Setup the clickers on the pager boxes. 
var items = $("ul#rotator_pager li").click(function () {
    $("ul#rotator li:eq(" + j + ")").clearQueue();
    $("ul#rotator li:eq(" + j + ")").stop();
    $("ul#rotator li:eq(" + j + ")").hide();
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
    j = items.index(this);
    cycleThru();
    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

Basically, when you click on the list element, it :

• clears all of the animations (dequeue and .stop),
• hides the currently showing content list element,
• sets the selector of the content list element to the cooresponding selected list element
• finally, kicks off the animation again.