Jquery, Childs get active one by one while parent li is active
<p>I am trying to make the child elements of an <code>li</code> active when the parent <code>li</code> is active. So far I can switch from <code>li</code> to <code>li</code> 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.</p>

<pre><code>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");​
</code></pre>

<p>Here is the link of what I have made so far. <a href="http://jsfiddle.net/MS5DV/13/" rel="nofollow">http://jsfiddle.net/MS5DV/13/</a></p>
