Using the AnimationExtender Component in Ajax Control Toolkit (ACT) - Adding the animation tags

(Page 4 of 5 )

Animation events will be defined under the Animation tags. You do not see any Animation component in the toolbox; however, if you place your cursor between the <AnimationExtender/> tags you will see the contextual drop-down shown in the next picture.

.

When you click on Animations, these declarative tags will be added to the source code. Animations support several kinds of events as mentioned earlier. Here the OnMouseOver and OnMouseOut events are used as shown. The complete source code is as shown in the next paragraph. Again only the items in the <form/> are shown.

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1"
runat="server">
  </asp:ScriptManager>
   <ajaxToolkit:AnimationExtender ID="AnimationExtender1"
runat="server" TargetControlID="Panel1" >
  <Animations>
    <OnMouseOver>
      <Color Duration="2" StartValue="#66FFFF"
        EndValue="#66CCFF" Property="style"
        PropertyKey="color" />
    </OnMouseOver>
    <OnMouseOut>
      <Color Duration="2" EndValue="#6600FF"
        StartValue="#3366CC" Property="style"
        PropertyKey="color" />
    </OnMouseOut>
  </Animations>
  </ajaxToolkit:AnimationExtender>
  <asp:Panel ID="Panel1" runat="server"
    Height="50px" Width="125px"
    BackColor="AliceBlue" BorderStyle="Groove">
    "My first animation with ACT"
  </asp:Panel>
</form>

The displayed MouseiInOut.aspx page displays as shown and the OnMouseOver and OnMouseOut events can be verified.

Next: OnClick event of a control >>
 

More JavaScript Articles
More By Jayaram Krishnaswamy

Comments On: Using the AnimationExtender Component in Ajax Control Toolkit (ACT)

· Declarative mark up will have a larger following as it appeals to developers who are...   >>> Post your comment now!