UpdatePanel innner elements animation

Question

I have an UpdatePanel with count of elements on it and AnimationExtender:

<asp:UpdatePanel ID="updPan2" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
  <div>
    <table>
      <tr>
        <td><div id="lblText1" runat="server">Text 1</div></td>
        <td><asp:LinkButton ID="lnkButton1" Text="Click" runat="server" OnClick="lnkButton1_Click" /></td>
      </tr>
      <tr>
        <td><div id="lblText2" runat="server">Text 2</div></td>
        <td><asp:LinkButton ID="lnkButton2" Text="Click" runat="server" OnClick="lnkButton2_Click" /></td>
      </tr>
      <tr>
        <td><div id="lblText3" runat="server">Text 3</div></td>
        <td><asp:LinkButton ID="lnkButton3" Text="Click" runat="server" OnClick="lnkButton3_Click" /></td>
      </tr>
    </table>

    <cc1:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkButton1" runat="server">
      <Animations>
        <OnClick>
          <Color AnimationTarget="lblText1"
            Duration="5"
            StartValue="#FF0000"
            EndValue="#666666"
            Property="style"
            PropertyKey="backgroundColor" />
        </OnClick>
      </Animations>
    </cc1:AnimationExtender>    

    <asp:Button ID="btnSave" Text="Save" runat="server" />

  </div>
  </ContentTemplate>
</asp:UpdatePanel>

I want to do one thing. When I click on lnkButton1 then element lblText1 should be animated for 5 seconds When I click on lnkButton2 then element lblText2 should be animated for 5 seconds When I click on lnkButton3 then element lblText3 should be animated for 5 seconds

And when I click btnSave all elements (lblText1, lblText2, lblText3) should be animated together for 5 seconds. But when I'm using AnimationExtender with OnClick animation all of the elements animates onli for less then 1 second, even if I set Duration for 5 second. How can I make such thing? Thanks.

Answer 1

I ound solution of this problem. I've added update panels around elements. And used UpdatePanelAnimationExtender1 for each of panels and one for all elements in paralel execution.

Here is code solving this problem.

<asp:UpdatePanel ID="updPan2" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
  <div style="border:solid 1px #000;">
    <p>
      <%= DateTime.Now.ToString("HH:mm:ss") %>
    </p>  

    <asp:UpdatePanel ID="upP1" UpdateMode="Conditional" runat="server">
      <ContentTemplate>
        <table>
          <tr>
            <td><div id="lblText1" runat="server">Text 1</div></td>
            <td><asp:LinkButton ID="lnkButton1" Text="Click" runat="server" OnClick="lnkButton1_Click" /></td>
          </tr>
        </table>        
      </ContentTemplate>
    </asp:UpdatePanel>
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="upP1" runat="server">
      <Animations>
        <OnUpdated>
          <Color AnimationTarget="lblText1"
            Duration="2"
            StartValue="#FF0000"
            EndValue="#666666"
            Property="style"
            PropertyKey="backgroundColor" />
        </OnUpdated>
      </Animations>
    </cc1:UpdatePanelAnimationExtender>

    <asp:UpdatePanel ID="upP2" UpdateMode="Conditional" runat="server">
      <ContentTemplate>
        <table>
          <tr>
            <td><div id="lblText2" runat="server">Text 2</div></td>
            <td><asp:LinkButton ID="lnkButton2" Text="Click" runat="server" OnClick="lnkButton2_Click" /></td>
          </tr>
        </table>        
      </ContentTemplate>
    </asp:UpdatePanel>
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" TargetControlID="upP2" runat="server">
      <Animations>
        <OnUpdated>
          <Color AnimationTarget="lblText2"
            Duration="2"
            StartValue="#FF0000"
            EndValue="#666666"
            Property="style"
            PropertyKey="backgroundColor" />
        </OnUpdated>
      </Animations>
    </cc1:UpdatePanelAnimationExtender>

    <asp:UpdatePanel ID="upP3" UpdateMode="Conditional" runat="server">
      <ContentTemplate>
        <table>
          <tr>
            <td><div id="lblText3" runat="server">Text 3</div></td>
            <td><asp:LinkButton ID="lnkButton3" Text="Click" runat="server" OnClick="lnkButton3_Click" /></td>
          </tr>
        </table>        
      </ContentTemplate>
    </asp:UpdatePanel>
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender3" TargetControlID="upP3" runat="server">
      <Animations>
        <OnUpdated>
          <Color AnimationTarget="lblText3"
            Duration="2"
            StartValue="#FF0000"
            EndValue="#666666"
            Property="style"
            PropertyKey="backgroundColor" />
        </OnUpdated>
      </Animations>
    </cc1:UpdatePanelAnimationExtender>


    <asp:Button ID="btnSave" Text="Save" runat="server" />

  </div>
  </ContentTemplate>
</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender ID="upaPan1" TargetControlID="updPan2" runat="server">
  <Animations>
    <OnUpdated>
      <Parallel>
        <Color AnimationTarget="lblText1"
          Duration="2"
          StartValue="#FF0000"
          EndValue="#666666"
          Property="style"
          PropertyKey="backgroundColor" />
        <Color AnimationTarget="lblText2"
          Duration="2"
          StartValue="#FF0000"
          EndValue="#666666"
          Property="style"
          PropertyKey="backgroundColor" />
        <Color AnimationTarget="lblText3"
          Duration="2"
          StartValue="#FF0000"
          EndValue="#666666"
          Property="style"
          PropertyKey="backgroundColor" />
      </Parallel>
    </OnUpdated>
  </Animations>
</cc1:UpdatePanelAnimationExtender>