Javascript Transition

programming web dev
1

Hi! I can’t get my script working right. Can anybody help me?

This is what it is suppose to do:
1: fades out the content of one div
2: changes it’s size and fade the color to another color (speciefied by the next div)
3: fades in the next div’s content

The javascript:

 
<script type="text/javascript">
var x;
var y;
var m;
var n;
var o;
var p;
var obj1;
var obj2;
var ieopf;
var actObj = '';
function bytte(objb)
{
if(actObj == '')
{
actObj = 'teste1';
}
obj1 = actObj;
obj2 = objb
var res1 = document.getElementById(obj1);
res1.style.zIndex = 99;
res1.style.MozOpacity = 1;
ieopf = 1;
m = res1.offsetWidth;
n = res1.offsetHeight;
o = m;
p = n;
var res2 = document.getElementById(obj2);
res2.style.display = 'block'
x = res2.offsetWidth
y = res2.offsetHeight;
res2.style.display = 'none'
res2.style.marginTop = -y;
setTimeout("fadeut()",8);
}
function show()
{
//alert("x: " + x + " - m: " + m + " - o: " + o + "
y: " + y + " - n: " + n + " - p: " + p);
var res1 = document.getElementById(obj1);
if(y > p)
{
if(n >= y)
{
res1.style.height = y + 'px';
n = y;
}
else
{
res1.style.height = n + 'px';
}
}
else
{
if(n <= y)
{
res1.style.height = y + 'px';
n = y;
}
else
{
res1.style.height = n + 'px';
}
}
 
if(x > o)
{
if(m >= x)
{
res1.style.width = x + 'px';
m = x;
}
else
{
res1.style.width = m + 'px';
}
}
else
{
if(m <= x)
{
res1.style.width = x + 'px';
m = x;
}
else
{
res1.style.width = m + 'px';
}
}
 
 
if(n != y || m != x)
{
setTimeout("show()",10);
}
else
{
var res2 = document.getElementById(obj2);
res2.style.MozOpacity = 0;
res2.style.display = 'block';
//res2.filters.alpha.opacity = 0;
res2.style.zIndex = 100;
ieopf = 0;
setTimeout("fade()",10);
}
 
if(y > p)
{
n = n + 6;
}
else
{
n = n - 6;
}
 
if(x > o)
{
m = m + 6;
}
else
{
m = m - 6;
}
}
 
function fade()
{
var res2 = document.getElementById(obj2);
if(ieopf < 1)
{
ieopf = ieopf + 0.05;
//res2.filters.alpha.opacity=ieopf;
res2.style.MozOpacity=ieopf;
setTimeout("fade()",10);
}
else
{
var res1 = document.getElementById(obj1);
res2.style.marginTop = 0;
actObj = obj2;
res1.style.display = 'none';
res1.style.MozOpacity=1;
res1.style.height = p;
res1.style.width = o;
 
}
} 
 
function fadeinn()
{
var res2 = document.getElementById(obj2);
if(ieopf < 1)
{
ieopf = ieopf + 0.05;
//res2.filters.alpha.opacity=ieopf;
res2.style.MozOpacity=ieopf;
setTimeout("fadeinn()",10);
}
else
{
var res1 = document.getElementById(obj1);
res1.style.display = 'none';
}
}
 
function fadeut()
{
obj = obj1 + "innhold";
var res2 = document.getElementById(obj);
if(ieopf > 0)
{
ieopf = ieopf - 0.05;
//res2.filters.alpha.opacity=ieopf;
res2.style.MozOpacity=ieopf;
setTimeout("fadeut()",10);
}
else
{
res2.style.MozOpacity = 0;
setTimeout("show()",10);
}
}
</script>

The HTML:

 
<div id="test2" style="position: relative; width: 600px; height: 250px; background-color: #000077; color: #EEEEEE;">
<div id="test2content">
text
</div>
</div> 
 
<div id="test3" style="position: relative; width: 350px height: 200px; background-color: #00DD77; display: none; color: #EEEEEE;">
<div id="test3content">
some other text
</div>
</div>
 
<br />
<br />
<a href="javascript:bytte('test3')">change to 3</a> <br />
<a href="javascript:bytte('test2')">change to 2</a> <br />