Javascript: wait for action to finish before executing another

I'll try to describe my problem with words first and then throw some code at you.

I am using Scriptaculous on my website to slide a small div left and right when the user clicks a link.
The code executes properly and I'm mostly very happy with it.
However, the function called to slide the div is interrupted by the link they are clicking loading. So it starts out sliding, but as soon as the link loads, it pops over to the final destination. It looks bad and I want the full slide to happen before the page even knows it needs to load another page.

As I said, I'm using Scriptaculous.

Here's the code to generate my menubar:

Code: [Select]

<div id="menucontainer">
	<div id="menunav" class="clear">
		<ul>
			<?php
            	$base = "http://www.thomasrandolph.info/";
				$num = count($tmpl->labels);
				for ($i = 0; $i < $num; $i++)
				{
					$label = $tmpl->labels[$i];
					$link = $tmpl->links[$i];
                    
					if ($i == $tmpl->current)
					{
						$current = 'class="current"';
					}
					else
					{
						$current = '';
					}
                    
                    if ($i == 0 && $current == 'class="current"')
                    {
                    	$current = 'class="current left"';
                        $slide = "onclick=\"go_here('$base$link',0)\"";
                    }
                    elseif ($i == 0 && $current == '')
                    {
                    	$current = 'class="left"';
                        $slide = "onclick=\"slide_hor('joiner',-65);shake_it('content');go_here('$base$link',500)\"";
                    }
                    elseif ($i == 1 && $current == 'class="current"')
                    {
                    	$current = 'class="current right"';
                        $slide = "onclick=\"go_here('$base$link',0)\"";
                    }
                    elseif ($i == 1 && $current == '')
                    {
                    	$current = 'class="right"';
                        $slide = "onclick=\"slide_hor('joiner',65);shake_it('content');go_here('$base$link',500)\"";
                    }
					print "\n<li>\n	<a $current $slide>\n		<span>$label</span>\n	</a>\n</li>";
				}
			?>			
		</ul>
	</div>
</div>

As you can see, I'm using a javascript function to go to the link instead of an href. The only reason I'm doing this currently is because I thought it would be easier to "pause" the browser before following the link if it were javascript.

Here's the javascript code that the menubar loads:

Code: [Select]

function slide_hor(id, x)
{
	new Effect.Move(id,
		{	'x': x,
			y: 0,
			mode: 'relative',
			transition: Effect.Transitions.linear
		}
	);
}

function shake_it(ident)
{
	new Effect.Shake(ident, {distance: 1, duration: .4});
}

and here's two small global functions that a few things use:

Code: [Select]

function go_here(loc, delay_ms)
	{
		pause_exec(delay_ms)
		window.location=loc;
	}

function pause_exec(ms)
{
	var date = new Date();
	var curDate = null;
	
	do { curDate = new Date(); }
	while(curDate-date < ms);
}

Finally, here's the page in the wild:

http://www.thomasrandolph.info

So in summary:
I need the sliding effect from Scriptaculous to FINISH it's motion before the link loads so that the animation is not interrupted.

Thanks
-rock

p.s.
The delay function just pauses the whole browser, including the sliding effect so it just causes a visible jump, too.