When reading reports about early beta versions of NT5 I heard that the menus were not rolling in and out any more, the were fading. So I sat down and modified my swipe animation to create a fade effect. The fade effect can be done by changing the opacity of an element.

Setting the style

The opacity value is set with a filter called alpha (in Gecko they are using style="opacity: 0.5" but it is still really buggy) like this:

obj.style.filter = "alpha(opacity=" + percentage + ")";

Now all you have to do is to change the percentage value a little bit each time.

fade.js

To include the fade animation you need to import the file swipe.js like this:

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

and to us it you call the function fade. It takes four arguments and looks like this:

fade(element, boolFadeIn, numberOfSteps, timeBetweenEachStep)

If you set the boolFadeIn to false the element is faded out and then hidden.


WebFX
 

Swipe & Fade

You can of course use both fade and swipe on the same element. Note that the border isn't covered rightly by the alpha filter.


WebFX
 

Basics of Animations
The Swipe Animation
The Fade Animation
Mozilla Swipe and Fade

Author: Erik Arvidsson