Powered by Blogger.

Friday, February 14, 2014

How to make fade out animation effect in asp.net using Ajax AnimationExtender Control?



In This post I will expalin how to use animation effect using Ajax AnimationExtender control in asp.net.

The source page of the code is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AnimationExtender control Example</title>
    <style type="text/css">
        .c1
        {
            width: 250px;
            height: 200px;
            background-color: Aqua;
            border: 2px black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager runat="server">
        </asp:ToolkitScriptManager>
        //target control for making fade out animation effect
        <asp:Panel ID="p1" runat="server" CssClass="c1">
            I am going to fade out!
            <asp:LinkButton ID="lb1" runat="server" OnClientClick="return false;">FadeOut </asp:LinkButton>
        </asp:Panel>
        <asp:AnimationExtender ID="ae1" runat="server" TargetControlID="p1">
            <animations>
<OnClick>
<FadeOut Duration="10" Fps="40"></FadeOut>
</OnClick>
</animations>
    </div>
    </asp:AnimationExtender>
    </form>

</body>





0 comments

Post a Comment