Multiple UpdatePanelAnimationExtender Controls AjaxControlToolKit

Question

I am having a problem with the UpdatePanelAnimationExtender and multiple update panels. What I want to happen is for the panel to fade out, update, and then fade back in.

However, it fades out all the panels and only fades the one I updated back in. Apparently this is a rather common problem with UpdatePanelAnimationExtender, but I can't seem to find a solution. Would anyone happen to know of a way to work around this problem? Thanks in advance.

Here is some sample code:

<asp:UpdatePanel ID="update1" runat="server" UpdateMode="Conditional">
  //--My Code goes in here
</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender ID="updateAnimation1" runat="server" TargetControlID="update1">
     <Animations>
         <OnUpdating>
              <FadeOut Duration="0.2" Fps="20" />
         </OnUpdating>
         <OnUpdated>
              <FadeIn Duration="0.2" Fps="20" />
         </OnUpdated>
     </Animations>
</cc1:UpdatePanelAnimationExtender>

<asp:UpdatePanel ID="update2" runat="server" UpdateMode="Conditional">
  //--My Code goes in here
</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender ID="updateAnimation2" runat="server" TargetControlID="update2">
     <Animations>
         <OnUpdating>
              <FadeOut Duration="0.2" Fps="20" />
         </OnUpdating>
         <OnUpdated>
              <FadeIn Duration="0.2" Fps="20" />
         </OnUpdated>
     </Animations>
</cc1:UpdatePanelAnimationExtender>

Answer 1

Set the UpdateMode=Always on the UpdatePanels and that will fix it

Answer 2

I use the method UpdatePanelAnimationExtender conditional and valid with javascript. Greetings.

<cc1:UpdatePanelAnimationExtender ID="upaStock" runat="server" TargetControlID="upStock">
<Animations> 
    <OnUpdating>
        <Sequence>
            <Parallel duration="0">
                <Condition ConditionScript="document.getElementById('ctl00_p1_hdfValidacion2').value == 'true';">
                    <ScriptAction Script="onUpdating('ctl00_p1_pnlPopup','dviStock','divCuerpo');" />
                </Condition>
            </Parallel>
        </Sequence>
    </OnUpdating>

    <OnUpdated>
        <Sequence>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated('ctl00_p1_pnlPopup'); document.getElementById('ctl00_p1_hdfValidacion2').value = 'false';" />
            </Parallel>
        </Sequence>
    </OnUpdated>
</Animations>