[jQuery] slide one div out left while sliding one in right

[W. Young]

I have a container div with two inner divs.  I have one inner div
visible taking up 100% of the visible area and another hidden div.  I
want the visible div to slide to the left while simultaneously sliding
the other div in from the right.  This works fine except that while
the right div is sliding in, it appears below the left div.

How can this be done?

Here is the code:

<script type="text/javascript" src="js/jQuery/jquery.js"></script>
<script type="text/javascript" src="js/jQuery/effects.core.js"></
script>
<script type="text/javascript" src="js/jQuery/effects.slide.js"></
script>

<script type="text/javascript">
        $(document).ready(function() {
                $("#slide").click(function() {
                        $("#leftDiv").hide('slide', { direction: 'left' }, 
1000);
                        $("#rightDiv").show('slide', { direction: 'right' }, 
1000);
                        return false;
                });
        });
</script>

<div id="container" style="height: 100px; ">
        <div id="leftDiv" style="float: left; border: solid 1px black;
height: 100px; width: 100%;">
                <span>some text to slide out left</span>
        </div>
        <div id="rightDiv" style="float: left; display: none; border: solid
1px black; height: 100px; width: 100%;">
                <span>some text to slide in right</span>
        </div>
</div>
<div style="clear: both; height: 100px;">
        <input id="slide" type="button" value="Slide" />
</div>