OnMouseOut: El eterno problema

[lalcey]

Muchas gracias a los dos!.

Panino5001, interesantisimo el articulo, he aprendido bastante leyendolo, pero no consigo aplicarlo a la forma en que hago esto.

He sacado un ejemplo de como lo hago, para ponerlo por aqui:

Código javascript:

Elemento = function(id,altura){
  var thislocal = this;
  var Tmp, Tmp2;
 
  this.id = id;
  this.altura=altura;
 
  document.getElementById(id).onmouseover= function(){thislocal.Desplegar()};
  document.getElementById(id).onmouseout= function(){thislocal.Plegar()};
}
 
Elemento.prototype.Desplegar = function(){
  var obj = document.getElementById(this.id);
  var thislocal= this;
 
  if (this.altura<195){
    this.altura+=10;
    this.Tmp=setInterval(function(){thislocal.Desplegar()},25);
  }else{
    clearInterval(this.Tmp)
  }
  
   obj.style.height=this.altura;
}
 
Elemento.prototype.Plegar = function(){
  var obj = document.getElementById(this.id);
  var thislocal= this;
  
  if (this.altura>30){
    this.altura-=10;
    this.Tmp2=setInterval(function(){thislocal.Plegar()},25);
  }else{
    clearInterval(this.Tmp2)
  }
  
   obj.style.height=this.altura;
}
 
var E = new Elemento('DSubMenu',30);
 

Y el codigo HTML:

Código html:

<div id="DPrincipal" style="overflow:hidden;height:200px;width:150px;">
  <div id="DSubMenu" style="overflow:hidden;height:30px;width:135px;border: 1px solid;">
    <center>Info</center>
    <br><br>
    <a href="#">Informacion1</a><br>
    <a href="#">Informacion2</a><br>
    <a href="#">Informacion3</a><br>
    <a href="#">Informacion4</a>
  </div>
</div>
 

(Esto es un simple ejemplo de la forma que utilizo para hacer esto).

El problema esta, a la hora de meter las funciones Desplegar() y Plegar(), si lo hago sin estas funciones, haciendo que el efecto sea directo, no tengo estos problemas.

¿Alguna forma de interpretarlo?

Salu2!