HowTo : Sys.Preview.UI.Effects.FadeAnimation

The Sys.Preview.UI.Effects Namespace contains a couple of animations that one can use in their applications.

Here , we will talk about how to use the FadeAnimation thats present in the Sys.Preview.UI.Effects NameSpace.

The Scripts that are to be included are :

MicrosoftAjax.js
PreviewScript.js
PreviewGlitz.js

Call the Initialize function to do the same to the Ajax Scripts :-)

<script language="javascript">
    Sys.Application.initialize();
</script>

//Get a handle to the animation Target as a Sys.UI.Control object 
var domElementVar = new Sys.UI.Control( $get("animationTarget")  );

//Create an instance of the FadeAnimation .
      var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();

//Set the Duration 
       fadeAnimation.set_duration( 0.3 );
//Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
//Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
//Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
//Play the Animation
        fadeAnimation.play();

The Complete Example is given below , its also available as a download .

<!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>
    <title>Fade Animation Using Futures</title>
</head>
<body>

<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="Scripts/PreviewScript.js" type="text/javascript"></script>

<script src="Scripts/PreviewGlitz.debug.js" type="text/javascript"></script>

<!-- The Fade Out Animate Button -->

<input type="button" id="btnFadeOutAnimate" value="Fade Out" onclick="FadeUsingFutures(true )" />

<!-- The Fade In Animate Button -->

<input type="button" id="btnFadeInAnimate" style ="display:none" value="Fade In" onclick="FadeUsingFutures( false )" />
    
<!-- The Div thats gonna be animated-->
<div id="animationTarget" style="width: 400px; height: 400px; background-color: #FFCC00">
</div>

<script language="javascript">
    Sys.Application.initialize();
    
    //Get a handle to the animation Target as a Sys.UI.Control object 
    var domElementVar = new Sys.UI.Control( $get("animationTarget")  );
    function FadeUsingFutures( fadeOut )
    {
        //Create an instance of the FadeAnimation .
        var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
        
        //Decide whether to Fadein Our FadeOut
        var fadeEffect = fadeOut ?  Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;
           
       //Hide / Show the appropriate button(s)
        $get("btnFadeOutAnimate").style.display =  fadeOut  ? "none":"block";
        $get("btnFadeInAnimate").style.display  =  fadeOut  ? "block":"none";
            
       //Set the Duration 
       fadeAnimation.set_duration( 0.3 );
       //Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
        //Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
        //Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
        //Play the Animation
        fadeAnimation.play(); 
    }
    
    </script>