The Coding Humanist

How To: Use the MS Ajax Fade Animation in Javascript

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.

To fade a div out (for example), the following script can be used:

    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.

    }

The fade out is similar:

    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();

    }