Powered by Blogger.

Friday, February 14, 2014

How to make scaling animation effect using AnimationExtender Control in Asp.Net?



This post explains how to make scaling  animation effect  using AnimationExtender control in asp.net.

The source page is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Creating scaling effect using animation extender control </title>
    <style type="text/css">
        .c1
        {
            width: 50px;
            height: 50px;
            background-color: Green;
            padding: 15px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager runat="server">
        </asp:ToolkitScriptManager>
        <asp:Panel ID="p1" runat="server" CssClass="c1">
            <h3>
                Do Animate!!!</h3>
        </asp:Panel>
        <asp:AnimationExtender ID="ae2" runat="server" TargetControlID="p1">
            <animations>

<OnClick>

<Sequence>
<Scale ScaleFactor="2" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" ></Scale>  
</Sequence>

</OnClick>

</animations>
        </asp:AnimationExtender>
    </div>
    </form>
</body>

</html>



0 comments

Post a Comment