This doesn't work as supposed in IE5b2 due to a bug in the filter system.

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
 



Basics of Animations
The Swipe Animation
The Fade Animation

Author: Erik Arvidsson

Back to Main page
Page designed and maintained by Erik Arvidsson and Emil A. Eklund
n
n
Back