Question

I am trying to make the child elements of an li active when the parent li is active. So far I can switch from li to li and activate the children, but they don’t show in order and they have random movement. If can anyone help me I would be very grateful.

var toggleChild = function() {
    $(".on span").children('a').children('span').removeClass('ready');
    $(".on span.active").removeClass().next().add(".on span:first").last().addClass("active").children('a').children('span').addClass('ready');
};

var toggleSlide = function() {
    $("#slider li.on").removeClass().next().add("#slider li:first").last().addClass("on");
    setInterval(toggleChild, 500);
};

setInterval(toggleSlide, 3000);
$("#slider .active a#open span").addClass("ready");​

Here is the link of what I have made so far. http://jsfiddle.net/MS5DV/13/

Answer 1

You have a recurring interval set to 3000 for toggleSlide().

Though every call to toggleSlide start a new recurring interval to toggleChild().

Every 3 seconds another half-second interval is started (and keeps on doing it forever).

Stopping an interval is done by:

var myIntervalId = setInterval(toggleSlide, 3000);
clearInterval(myIntervalId);

Though I think you mean to do a setTimeout(toggleChild, 500); inside toggleSlide()