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">
            width: 250px;
            height: 200px;
            background-color: Aqua;
            border: 2px black;
            padding: 10px;
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager runat="server">
        //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:AnimationExtender ID="ae1" runat="server" TargetControlID="p1">
<FadeOut Duration="10" Fps="40"></FadeOut>