[flexcoders] How to link effects so that one starts after one finishes?

[gmoniey22]

I have two components, and I want to swap between them using wipe down/up. i.e. 
click a button, the visible panel slides down, and after that panel is no 
longer visible, the other panel slides up and takes its place.

I have tried something like the following (please excuse the crude example), 
but the effects occur at the same time, and it doesn't look that good.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute">
        <mx:Script>
                <![CDATA[
                        import mx.binding.utils.BindingUtils;
                        
                        [Bindable]
                        private var _show:Boolean = true;
                        
                        private function swapShow(event:MouseEvent):void {
                                _show = !_show;
                        }
                ]]>
        </mx:Script>
        
        
    <mx:WipeDown id="wipeDown" duration="700" />
    <mx:WipeUp id="wipeUp" duration="700" />
    
    <mx:VBox>
        <mx:DataGrid visible="{_show}" includeInLayout="{_show}" 
showEffect="wipeUp" hideEffect="wipeDown" />
        <mx:List visible="{!_show}" includeInLayout="{!_show}"  
showEffect="wipeUp" hideEffect="wipeDown"/>
        <mx:Button label="Swap" click="swapShow(event)" />
    </mx:VBox>
</mx:Application>