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

Thank you! That worked for me.