[Resolvido] Redimensionar DIV de modo "Suave"

Boa noite!

Faz um tempo q eu nao apareço.. mas to aki dnv!! XD

Preciso fazer um menu.. onde uma div é redimensionada de 50px para 300px com OnMouseOver e JS..

porem ela "abre e fecha" muito rapido.. tem como fazer isso de modo mais suavizado.. mais lento??

NO CSS

.modas{
padding: 0px;
overflow: auto;
width: 51px;
height: 300px;
float: right;
display: block;
background-image: url('images/intro_modas.jpg');
background-repeat: no-repeat;
}

NA PAGINA
<div id="modas" class="modas" onmouseout="document.getElementById('modas').style.width = 51" onmouseover="document.getElementById('modas').style.width = 300"></div>

Eh isso ae..

Obrigado!