slide layer

Jeg har lavet en simpel slide ind menu fra højre.

Denne function før mine layer til at glide ind og blive clippet, så de løbende bliver synlige.
Det virker fint, men den hakker alt for meget, hvis der er en der har en løsning kunne det være helt perfekt.

function slide() {           
        if (block.xpos > endLeft) {
        block.xpos -= 5
        block.left = block.xpos;           
        if (block.hide < slutLeft){
        block.hide += 5
        block.clip = \"rect(auto,\"+block.hide+\",auto,auto)\";

For helheden skyld er hele koden nedenunder
<script language=\"JavaScript\">
<!--

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

//function til at gemme layers
function hide(id){
    if (ns4) document.layers[id].visibility = \"hide\"
    else if (ie4) document.all[id].style.visibility = \"hidden\"   
}

//function til at vise det valgte lag og fortælle det hvorhenne det skal starte
function init(id){
    if (ns4) document.layers[id].visibility = \"show\"
    else if (ie4) document.all[id].style.visibility = \"visible\"
   
    if (ns4) block = document.layers[id]
    if (ie4) block = document.all[id].style
    block.xpos = parseInt(block.left)
    block.xpos = 709;    //sætter teksten til udgangspunktet,  kan hentes dynamisk ved at aflæse layer
    endLeft = 15;
    slutLeft = 375;
    block.hide = 0; // sætter clip funtionen til at have udgangspunkt 0   
    }
   
// denne function gør at teksten flytter sig, via et loop
// 5 pix til højre, så laver man et loop så den flytter sig 5 pix af gangen
function slide() {           
        if (block.xpos > endLeft) {
        block.xpos -= 5
        block.left = block.xpos;           
        if (block.hide < slutLeft){
        block.hide += 5
        block.clip = \"rect(auto,\"+block.hide+\",auto,auto)\";
        setTimeout(\"slide()\",25)
        }
    }
}
//-->
</SCRIPT>
</script>

                        <table border=\"0\" align=\"center\" cellspacing=\"0\" cellpadding=\"0\">
                            <tr>
                                <td width=\"50\"></td>
                                <td><font class=\"topmenu\"><A class=\"topmenusub\" HREF=\"#\" OnMouseOver=\"hide(\'txt2\');hide(\'txt3\');init(\'txt1\');slide();\">hovedmenu1</A></font></td>
                                <td width=\"50\"></td>
                                <td><font class=\"topmenu\"><a class=\"topmenusub\" href=\"java script:hide(\'txt1\');hide(\'txt3\');init(\'txt2\');slide();\">hovedmenu2</a></font></td>
                                <td width=\"50\"></td>
                                <td><font class=\"topmenu\"><a class=\"topmenusub\" href=\"java script:hide(\'txt1\');hide(\'txt2\');init(\'txt3\');slide();\">hovedmenu3</a></font></td>
                                <td width=\"50\"></td>
                                <td><font class=\"topmenu\">hoved menu4</font></td>
                                <td width=\"50\"></td>
                            </tr>
                        </table>
                   
<span id=\"txt3\" z-index: 3;  STYLE=\"position:absolute; left:325px; top:155px; width:375px; height:10px; clip:rect(auto,375,auto,auto); visibility: hidden;\"><font class=\"topmenusub\">under menu1</font></span>

<span id=\"txt2\" z-index: 2;  STYLE=\"position:absolute; left:325px; top:155px; width:375px; height:10px;clip:rect(auto,375,auto,auto);  visibility: hidden;\"><font class=\"topmenusub\">undermenu 2</font></span>

<span id=\"txt1\" z-index: 1; STYLE=\"position:absolute; left:325px; top:155px; width:375px; height:10px;clip:rect(auto,375,auto,auto);  visibility: hidden;\"><font class=\"topmenusub\">undermenu 3</font></span>

        setTimeout(\"slide()\",25)
        }
    }
}