When you apply a Resize effect to a Panel container, the measurement and layout algorithm for the effect executes repeatedly over the duration of the effect. When a Panel container has many children, the animation can be jerky because Flex cannot update the screen quickly enough. Also, resizing one Panel container often causes other Panel containers to resize.

To solve this problem, you can use the Resize effect's hideChildrenTargets property to hide the children of Panel containers while the Resize effect is playing. The value of the hideChildrenTargets property is an Array of Panel containers that should include the Panel containers that resize during the animation. Before the Resize effect plays, Flex iterates through the Array and hides the children of each of the specified Panel containers.

In the following example, the children of the panelOne and panelTwo Panel containers are hidden while the Panel containers resize:

<?xml version="1.0"?>
<!-- behaviors\PanelResize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Resize id="myResize" heightTo="300"
        hideChildrenTargets="{[panelOne, panelTwo]}"/>      

    <mx:Button id="b1" 
        label="Reset" 
        click="panelOne.height=200;panelTwo.height=200;panelThree.height=200"
    />

    <mx:HBox>
        <mx:Panel id="panelOne" title="Panel 1" height="200" mouseDownEffect="{myResize}">
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
        </mx:Panel>
        <mx:Panel id="panelTwo" title="Panel 2" height="200" mouseDownEffect="{myResize}">
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
        </mx:Panel>
        <mx:Panel id="panelThree" title="Panel 3" height="200" mouseDownEffect="{myResize}">
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>
            <mx:Button label="Click Me"/>     
        </mx:Panel>
    </mx:HBox>
    
</mx:Application>
The executing SWF file for the previous example is shown below:

For each Panel container in the hideChildrenTargets Array, the following effect triggers execute:

• resizeStartEffect Delivered before the Resize effect begins playing.
• resizeEndEffect Delivered after the Resize effect finishes playing.

If the resizeStartEffect trigger specifies an effect to play, the Resize effect is delayed until the effect finishes playing.

The default value for the Panel container's resizeStartEffect and resizeEndEffect triggers is Dissolve, which plays the Dissolve effect. For more information about the Dissolve effect, see Available effects.

To disable the Dissolve effect so that a Panel container's children are hidden immediately, you must set the value of the resizeStartEffect and resizeEndEffect triggers to none.