wpf animation events overlapping

I've got a canvas control that grows in height when you move the mouse over it and shrinks back on mouse leave.

<Canvas x:Name="infoBar" Width="720" Height="39" Background="Red">
            <Canvas.Triggers>
           开发者_JAVA百科     <EventTrigger RoutedEvent="Canvas.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
            Storyboard.TargetName="infoBar" 
            Storyboard.TargetProperty="Height"
            From="39" To="255" Duration="0:0:0.5" 
            />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Canvas.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
            Storyboard.TargetName="infoBar" 
            Storyboard.TargetProperty="Height"
            From="255" To="39" Duration="0:0:0.5" 
            />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <StackPanel>
                <TextBlock/>
                <TextBlock/>
           </StackPanel> 
        </Canvas>

This works fine. However if two quick consecutive events take place (mouseleave before mouse enter animation finishes) it goes nuts.

Is there anyway i can tell it to cancel out any other events that happen before an animation finishes?

Using your event triggers you can perform pause, stop, resume, etc. commands on named storyboards.

This article should answer your questions.