Pues quería hacer que una determinada función que tengo especificada para un JavaScript no suceda de manera inmediata sino que tenga una transición. Soy muy nuevo en JavaScript y como quien dice ni siquiera se me ocurre cómo puede hacerse, agradecería toda ayuda

Tengo el siguiente script:
Código:
Estoy seguro que el código no es ni la mitad de limpio o efectivo que podría, pero estoy aprendiendo <script type="text/javascript"> document.getElementById("permisos").onmouseover = function () { document.getElementById("listado de permisos").style.display="block"; } document.getElementById("permisos").onmouseout = function () { document.getElementById("listado de permisos").style.display="none"; } </script>


Me gustaría que ese cambio en la propiedad display sea gradual.
Lo que más me gustaría es que la capa en cuestión se desplegara de arriba hacia abajo a modo de cortina, pero un fade-in/fade-out también me valdría.
Muchísimas gracias de antemano y que sepáis que iré participando más por aquí ya que tengo necesidad de incrementar muchísimo mi competencia como programador web
