Simple animation with javascript - IE causes problems

[Bjorndal]

Hey guys!

I'm currently working on project, in which I need to animate a menu. It seems to work all right in Safari and Firefox, but Internet Explorer 7.0 makes the animation run slower, and I can't figure out why!?
So far I have only tested it in version 7.0 of Internet Explorer.

First of all I'll show you the Javascript code, which runs in a seperate document:

function startSliders(){
 
 
            document.getElementById("menuPunktEt").onclick = function(){
                if (mayI == true) {
                    if (rightSide == 4) {
                    }
                    else 
                        if (rightSide == 3) {
                            rightSide = 4;
                            leftSide = 0;
                            animate('contentEt', 'contentTo');
                        }
                    if (rightSide == 2) {
                        rightSide = 4;
                        leftSide = 0;
                        animate('contentEt', 'contentTre');
                    }
                    if (rightSide == 1) {
                        rightSide = 4;
                        leftSide = 0;
                        animate('contentEt', 'contentFire');
                    }
                    if (rightSide == 0) {
                        rightSide = 4;
                        leftSide = 0;
                        animate('contentEt', 'forside');
                    }
                }
            }
            document.getElementById("menuPunktTo").onclick = function(){
                if (mayI == true) {
                    if (rightSide == 4) {
                        rightSide = 3;
                        leftSide = 1;
                        animate('contentTo', 'contentEt');
                    }
                    else 
                        if (rightSide == 3) {
                        }
                        else 
                            if (rightSide == 2) {
                                rightSide = 3;
                                leftSide = 1;
                                animate('contentTo', 'contentTre');
                            }
                            else 
                                if (rightSide == 1) {
                                    rightSide = 3;
                                    leftSide = 1;
                                    animate('contentTo', 'contentFire');
                                }
                                else 
                                    if (rightSide == 0) {
                                        rightSide = 3;
                                        leftSide = 1;
                                        animate('contentTo', 'forside');
                                    }
                }
            }
            document.getElementById("menuPunktTre").onclick = function(){
                if (mayI == true) {
                    if (rightSide == 4) {
                        rightSide = 2;
                        leftSide = 2;
                        animate('contentTre', 'contentEt');
                    }
                    else 
                        if (rightSide == 3) {
                            rightSide = 2;
                            leftSide = 2;
                            animate('contentTre', 'contentTo');
                        }
                        else 
                            if (rightSide == 2) {
                            }
                            else 
                                if (rightSide == 1) {
                                    rightSide = 2;
                                    leftSide = 2;
                                    animate('contentTre', 'contentFire');
                                }
                                else 
                                    if (rightSide == 0) {
                                        rightSide = 2;
                                        leftSide = 2;
                                        animate('contentTre', 'forside');
                                    }
                }
            }
            document.getElementById("menuPunktFire").onclick = function(){
                if (mayI == true) {
                    if (rightSide == 4) {
                        rightSide = 1;
                        leftSide = 3;
                        animate('contentFire', 'contentEt');
                    }
                    else 
                        if (rightSide == 3) {
                            rightSide = 1;
                            leftSide = 3;
                            animate('contentFire', 'contentTo');
                        }
                        else 
                            if (rightSide == 2) {
                                rightSide = 1;
                                leftSide = 3;
                                animate('contentFire', 'contentTre');
                            }
                            else 
                                if (rightSide == 1) {
                                }
                                else 
                                    if (rightSide == 0) {
                                        rightSide = 1;
                                        leftSide = 3;
                                        animate('contentFire', 'forside');
                                    }
                }
            }
        }
 
        function animate(expander, smaller){
            mayI = false;
            bigWindow = expander;
            var slider = document.getElementById(expander);
            var collapse = document.getElementById(smaller);
 
            collapse.style.width = xMinus + "px";
 
            slider.style.width = x + "px";
 
            x += speed;
            xMinus -= speed;
            percent = (lenght - x) / howFar;
            speed = speed * percent;
 
            if (speed > 0.01) {
                var callFunc = "animate('" + expander + "','" + smaller + "')";
                setTimeout(callFunc, 1);
            }
            else {
                mayI = true;
                x = 0;
                xMinus = 694;
                speed = 30;
                lenght = 8260;
                howFar = lenght - x;
                percent = 0;
 
            }
        }
 

And here comes the html-code:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hummel - You've got game</title>
<link rel="stylesheet " type="text/css" href="style.css " />
<script type="text/javascript" src="jscript.js "></script>
<script type="text/javascript">
var x = 0,xMinus = 695,speed = 30,lenght = 8260,howFar = lenght-x,percent,small ,rightSide = 0,leftSide = 4,mayI = true;
window.onload = function() {
startSliders(); }
</script>
</head>
<body>
<div id="wrapper">
<div id="shadowTop"> </div>
<div id="shadowLeft" ></div>
<div id="content">
<div id="contentEt"> </div>
<div id="menuPunktEt "></div>
<div id="contentTo"> </div>
<div id="menuPunktTo "></div>
<div id="contentTre" ></div>
<div id="menuPunktTr e"></div>
<div id="contentFire "></div>
<div id="menuPunktFi re"></div>
<div id="forside"></div>

</div>
<div id="shadowRight "></div>
<div id="footer"><p class="whiteTex t">Copyright by J I, M N & N B</p></div>
</div>
</body>
</html>[/HTML]

[acoder]

The memory leak is probably caused by a circular reference. See if this link helps.