Effect of smooth transition on JavaScript

Somehow travelling from page on page has got on one German site on which has found an interesting script which showed smooth transition between the text and smoothly replaced a picture. The script cost $249. Having thought, that for such sum, it there should be the best script on JavaScript in the world, I have written own script, working not worse at all.

The effect of smooth transition consists that one block smoothly replaces another, thus one fades, and another on the contrary smoothly appears, all this occurs simultaneously and makes rather beautiful impression. And it is not important, that there will be in these blocks, a text, the form or a picture.

For creation of the given effect naturally it is required to us more than one block:)

It is necessary for us to solve the following problems{tasks}:

1. To place two blocks in one position. As blocks we use a component div. Property position: absolute allows to place the block in any place of the screen with the instruction{indication} of coordinates left and top.

2. To place the link, which will cause procedure of smooth change of blocks next () (it is sold this link as as components div).

The text of a code on JavaScript looks simply enough:

<script language=JavaScript>

var m = new Array (0,100);

var t = new Array ();

function next () {

m [0] + =1;

m [1] - =1;

document.getElementById ("a2") .style.filter = " alpha (opacity = " + m [0] + ")";

document.getElementById ("a1") .style.filter = " alpha (opacity = " + m [1] + ")";

t [0] = setTimeout (" next () ", 5);

if (m [0]> 99) clearTimeout (t [0]);

}

</script>

HTML a code:

<div id=a1 style ='position: absolute; top: 100px; left: 100px '>

<img src=1.jpg>

</div>

<div id=a2 style ='position: absolute; top: 100px; left: 100px; filter: alpha (opacity=0) '>

<img src=2.jpg>

</div>

<div onclick ='next () ' style ='cursor: hand; '>

To see effect

</div>

It is necessary to notice, that the given effect is based on application of filters in IE, therefore in Opera or Mozilla the given effect will not work.