Two UpdatePanelAnimation Extenders - causing animation to fire on both update panels.

Question

Me again!

I have the following that changes the label colour according to an update panel:

<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
            Enabled="True" TargetControlID="UpdatePanel1">
            <Animations>
        <OnUpdating>
        <Color
        AnimationTarget="lblSearchResults1"
            Duration="1"
            StartValue="#FFFFFF"
            EndValue="#FFFFFF"
            Property="style"
            PropertyKey="color"/> 
         </OnUpdating>
         <OnUpdated>
        <Color 
        AnimationTarget="lblSearchResults1"
            Duration="1"
            StartValue="#FFFFFF"
            EndValue="#009685"
            Property="style"
            PropertyKey="color" />
        </OnUpdated>
            </Animations>
        </asp:UpdatePanelAnimationExtender>

Fine. Works a treat.

However, I also have the following on the same page but within a different update panel:

<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
            Enabled="True" TargetControlID="UpdatePanel2">
            <Animations>
        <OnUpdating>
        <Color
        AnimationTarget="lblSearchResults2"
            Duration="1"
            StartValue="#FFFFFF"
            EndValue="#FFFFFF"
            Property="style"
            PropertyKey="color"/> 
         </OnUpdating>
         <OnUpdated>
        <Color 
        AnimationTarget="lblSearchResults2"
            Duration="1"
            StartValue="#FFFFFF"
            EndValue="#009685"
            Property="style"
            PropertyKey="color" />
        </OnUpdated>
            </Animations>
        </asp:UpdatePanelAnimationExtender>

This also works a treat. However, the update causes the animation/colour change to fire on both labels when either of them fires.

How do, or what do I have to do so that only one label changes colour one at a time i.e. when UpdatePanel1 updates, lblSearch1 changes colour but lblSearch2 stays as is.

Answer 1

My guess is that your problem is with UpdatePanels and not with animation extenders. You need to check the UpdateMode property for your UpdatePanels. It needs to be conditional for your scenario to work. If both UpdatePanels are updated (either via UpdateMode=Always or via programmatic way of calling Update() method), both animations will be triggered.