Share via

HowTo : Sys.Preview.UI.Effects.FadeAnimation

  • Article

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 :

  1. MicrosoftAjax.js
  2. PreviewScript.js
  3. 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>

 </body>
</html>

Futures Animation.zip

Comments

  • Anonymous
    March 14, 2007
    You've been kicked (a good thing) - Trackback from DotNetKicks.com