Div Container vergrößeren und verkleinern

[ste3et_C0st]

Hallo ich möchte für meine Homepage eine sidebar machen die ausfahren soll mit onmouse over ich hab diesen code bisher JS

var width = 0;
var block = 0;


function settings_o() {
   document.getElementById('settings_open').style.width  = width + "px";
   document.getElementById('settings_open').style.display = "block";
    if(block == 0){
        if(width <= 150){
            width = width + 1;
            interval = setInterval(settings_o,10);
        }else{
            clearInterval(interval);
            block = 1;
        }
    }
}


function settings_c() {
   document.getElementById('settings_open').style.width  = width + "px";
   document.getElementById('settings_open').style.display = "none";
    if(block == 1){
        if(width >= 0){
            width = width - 1;
            interval = setInterval(settings_c,10);
        }else{
        clearInterval(interval);
        block = 0;
        }
    }
}

Denoch ist dieser verbugt. Ich will das der div größer wird beim überfahren auf maximal maß und wieder kleiner wird auf 0px wenn ich mit der Maus nichtmer darüber bin.

 

[Tronjer]

Wieso nicht mit CSS3?

CSS3 Transition

Alternativ dazu könnte man auch jQuery einsetzen. Funktionen wie hover(), css() und animate() fallen mir da auf Anhieb ein.