Creating a Yellow Fade Effect

Modified on 2010/05/06 00:28 by Stephen Walther — Categorized as: Uncategorized

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:ToolkitScriptManager ID="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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="Message" runat="server">
Pay attention to me!
</asp:Panel>

<asp:LinkButton ID="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" %>
<!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>Yellow Fade</title>
    <style type="text/css">
    
    #Message {
        width: 250px;
        padding: 10px;   
        margin-bottom:10px;
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <asp:Panel ID="Message" runat="server">
    Pay attention to me!
    </asp:Panel>

    <asp:LinkButton ID="lnkYellowFade" OnClientClick="return false;" runat="server">Play Animation</asp:LinkButton>

    <asp:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkYellowFade" runat="server">
    <Animations>
        <OnClick>
            <Sequence>
            <Color 
                AnimationTarget="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: