Using the Animation control Extender in AJAX ASP.NET
Always wondered those cool effects when you mouse over a Text or a form and its changing colors or fading out?
In Today Ajax Tutorial were going to show you a great example of this seen in many applications and Social Networks Using AJAX.
By the Way Did you know
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Animation Control provides good animation effect such as moving a server Control to a new place, resizing it, modifying its color, or making it fade in or fades out. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.
Let’s Take a Look at simple Demonstration of the Animation Control Extender
In this sample, you learn how to use an Animation control extender to cause a fade effect
Below are the steps
· Add a New WebForm to this project and name it AnimationSample.aspx.
· Add a ScriptManager to the page.
· Add an ASP.NET Panel control to the page which contains the content that you want to highlight with fade effect.
· Add a LinkButton control to trigger the animation. The LinkButton includes an OnClientClick property that prevents the LinkButton from causing a postback.
· Add an Animation control extender to the page. Set the TargetControlID property of the Animation control to the ID of the LinkButton control.
The markup of the page will look like, You can Reference the Markup code Below, Give it a Try without looking at the markup, your goal is to learn AJAX and Memorize this to use this in other situations.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AnimationSample.aspx.cs" Inherits="AnimationSample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Animation Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="Message" runat="server" Width="250px">
<h2 style="color:#FFF;">HIGH PRIORITY!</h2>
</asp:Panel>
<asp:LinkButton ID="lnkbtn" OnClientClick="return false;" runat="server">Start Animation</asp:LinkButton>
<cc1:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkbtn" runat="server">
<Animations>
<OnClick>
<Sequence>
<Color
AnimationTarget="Message"
Duration="2"
Property="style"
PropertyKey="backgroundColor"
StartValue="#CE0E3F"
EndValue="#FFFFFF" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
</div>
</form>
</body>
</html>
The output in browser after clicking the link button will be
See a Short and Sweet AnimationControl Extender Control AJAX Tutorial.
As you know
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
The red color which is the Start Value color will fade out after the specified duration to the End Value color.
Thank You for visiting AJAXTutorials.com the Place to Learn about AJAX ASP.NET
