Creating a Yellow Fade Effect
In this tutorial, you learn how create a yellow fade effect by taking advantage of the Ajax Control Toolkit Animation control. Using a yellow fade effect is a good way to draw attention to a specific area of a page.You can create a yellow fade effect by completing the following steps: (1) Add a ToolkitScriptManager (2) Add a Panel (3) Add a LinkButton (4) Add an Animation control.
To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.
Add a ToolkitScriptManager
Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>
Add a Panel
The Panel control contains the content that you want to highlight with the yellow fade effect. In the following code, the Panel contains a simple text message:<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Message"runat="server"> Pay attention to me! </asp:Panel>
Add a LinkButton
We'll use a LinkButton control to initiate the animation. Notice that the LinkButton includes an OnClientClick property that prevents the LinkButton from causing a postback:<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Message"runat="server"> Pay attention to me! </asp:Panel><asp:LinkButtonID="lnkYellowFade"OnClientClick="return false;"runat="server">Play Animation</asp:LinkButton>
Add an Animation Control
The final step is to add the Animation control. When you click the LinkButton, the Animation control uses a Color animation to create the yellow fade effect.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="Animation_Simple" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Yellow Fade</title><styletype="text/css"> #Message { width: 250px; padding: 10px; margin-bottom:10px; } </style></head><body><formid="form1"runat="server"><div><asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Message"runat="server"> Pay attention to me! </asp:Panel><asp:LinkButtonID="lnkYellowFade"OnClientClick="return false;"runat="server">Play Animation</asp:LinkButton><asp:AnimationExtenderID="AnimationExtender1"TargetControlID="lnkYellowFade"runat="server"><Animations><OnClick><Sequence><ColorAnimationTarget="Message"Duration="2"Property="style"PropertyKey="backgroundColor"StartValue="#FFFF66"EndValue="#FFFFFF"/></Sequence></OnClick></Animations></asp:AnimationExtender></div></form></body></html>
The final result looks like this:
Click here to see the final result