Execute function, only after another function has completed?
<p>This script cycles through elements indefinitely, and applies a class:</p>

<p><a href="http://jsfiddle.net/6HDAW/" rel="nofollow">http://jsfiddle.net/6HDAW/</a></p>

<pre><code>function across() {
var $active = $('.div .current');
var $next = $active.next();    
$next.addClass('current');
$active.removeClass('current');   
if($next.length == 0) { $(".div .bed:first-child").addClass('current'); }
}

function down() {
    var $active = $('#slideshow .active');
    var $next = $active.next();    
    $next.addClass('active');
    $active.removeClass('active');
    if($next.length == 0) { $("#slideshow .div:first-child").addClass('active'); }
}

$(function() {
  setInterval('across()', 500);
  setInterval('down()', 500);
});
</code></pre>

<p>There's a function for moving 'across' the  and a function for moving 'down' the .divs.</p>

<p>What do I need to change to make it so that the function 'down' only executes when function 'across' has completed?</p>

<p>I want it to cycle across the spans on the first line, then move down, cycle through the second line, then move down, cycle through the third line, and then the fourth line, before looping and doing the whole thing over again.</p>

<p>Thanks for your help.</p>
