The Coding Humanist

<%@ Page Language="C#" MasterPageFile="~/Themes/Default/MasterPages/Samples.Master" Title="How To: ASP.NET Ajax Fade Animation - The Coding Humanist" Inherits="Pylus.UI.ContentPage" %>
<script runat="server">
    public void Page_Load(object sender, EventArgs e)
    {
        HtmlGenericControl mainAjaxScript = new HtmlGenericControl("script");
        mainAjaxScript.Attributes.Add("type", "text/javascript");
        mainAjaxScript.Attributes.Add("src", "../Scripts/ASPNETAjaxFutures1_0/MicrosoftAjax.js");
        Page.Header.Controls.Add(mainAjaxScript);

        HtmlGenericControl previewScript = new HtmlGenericControl("script");
        previewScript.Attributes.Add("type", "text/javascript");
        previewScript.Attributes.Add("src", "../Scripts/ASPNETAjaxFutures1_0/PreviewScript.js");
        Page.Header.Controls.Add(previewScript);        
                
        HtmlGenericControl glitzScript = new HtmlGenericControl("script");
        glitzScript.Attributes.Add("type", "text/javascript");
        glitzScript.Attributes.Add("src", "../Scripts/ASPNETAjaxFutures1_0/PreviewGlitz.js");
        Page.Header.Controls.Add(glitzScript);        
    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="_contentPlaceHolderSamplesContent" runat="server">        
        
<div class="contentPage">
    
    <div class="contentHeader">
        <h2>How To: Use the MS Ajax Fade Animation in Javascript</h2>
        <p class="datePosted">May 22, 2007</p>
        
        <p class="technologies">Technologies</p>
        <ul>
            <li>ASP.NET 2.0</li>
            <li>ASP.NET Futures - May 2007</li>
        </ul>
    </div>
    
    <div class="primaryContent">

    
        <p>The fade animation will allow you to fade a page element in and out. This is done using the ASP.NET Ajax
        Futures Javascript library.</p>

        <div style="border: solid 1px black; padding: 10px;">

            <!-- This is the div that the fade animation will fade out. -->
            <div id="faderDiv" style="width: 200px; height: 100px; border: solid 1px #D0D0D0; background-color: #000000;"> </div>
               
            <br />

            <!-- This will invoke the method that will cause the fade out. -->
            <input type="button" id="fadeOutButton" value="Fade Out" onclick="fadeOut();" />
            
            <!-- This will invoke the method that will cause the fade in. -->
            <input type="button" id="fadeInButton" value="Fade In" onclick="fadeIn();" />

        </div>

        <p>The most significant part of this is the javascript. To fade the black div out, the following script is used:</p>


               
    <pre name="code" class="xml">
    function fadeOut()
    {
        var obj = $get('faderDiv');                            //This is a shortcut for document.getElementById. It will return the javascript element. This is the element that you want to fade.
        var target = new Sys.UI.Control(obj);               //The animation does not need a javascript element. It wants a Control. So use the element to instantiate the control.
        var animation = new Sys.UI.FadeAnimation();         //Instantiate
        animation.set_target(target);                       //An animation has to have a target to act upon.
        animation.set_effect(Sys.UI.FadeEffect.FadeOut);    //This determines whether a fade out or fade in is going to be executed.
        animation.set_duration(2);                          //How long the animation will last.
        animation.set_fps(25);                              //How many frames per second the animation should execute.
        animation.play();                                   //Once everything is setup, it can be executed.
    }</pre>

        <p>The fade out is similar:</p>

    <pre name="code" class="xml">
    function fadeIn()
    {
        //See notes on the fadeOut function.
        var obj = $get('faderDiv');
        var target = new Sys.UI.Control(obj);
        var animation = new Sys.UI.FadeAnimation();
        animation.set_target(target);
        animation.set_effect(Sys.UI.FadeEffect.FadeIn);
        animation.set_duration(2);
        animation.set_fps(25);
        animation.play();
    }</pre>


        <br />
        <hr />

        <pylus:ViewSourceControl runat="server" ID="_viewSourceControl" />

    </div>
            
    <script language="javascript" type="text/javascript">
    
        function fadeOut()
        {
            var obj = $get('faderDiv');                         //This is a shortcut for document.getElementById. It will return the javascript element. This is the element that you want to fade.
            var target = new Sys.UI.Control(obj);               //The animation does not need a javascript element. It wants a Control. So use the element to instantiate the control.
            var animation = new Sys.Preview.UI.Effects.FadeAnimation();         //Instantiate
            animation.set_target(target);                       //An animation has to have a target to act upon.
            animation.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut);    //This determines whether a fade out or fade in is going to be executed.
            animation.set_duration(2);                          //How long the animation will last.
            animation.set_fps(25);                              //How many frames per second the animation should execute.
            animation.play();                                   //Once everything is setup, it can be executed.
        }
        
        function fadeIn()
        {
            //See notes on the fadeOut function.
            var obj = $get('faderDiv');
            var target = new Sys.UI.Control(obj);
            var animation = new Sys.Preview.UI.Effects.FadeAnimation();
            animation.set_target(target);
            animation.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeIn);
            animation.set_duration(2);
            animation.set_fps(25);
            animation.play();
        }
        
    </script>
        
</div>
        
</asp:Content>