[Resolvido] Redimensionar DIV de modo "Suave"

[Hélcio Macedo 0]

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!

[William Bruno 1501]

acontece de forma brusca, pq você está mudando as propriedades do box, de uma só vez.

 

para um efeito suave, você precisa ir aumentando ela aos poucos.

tipo, a cada 300 milisegundos, aumenta 5~10px, até ela chegar ao tamanho final.

 

a função js, que temos para disparar tal coisa a cada x ms, é a setInterval()

 

jQuery possui o método .animate() q facilita esse trabalho, porém a idéia doq ele faz internamente, é exatamente essa q descrevi aqui.

[Hélcio Macedo 0]

Obrigado!

Consegui com o jQuery.

Eu sabia q em JS daria pra fazer tb mas nem me lembrava como.. mas resolvi por com jQuery msm q fica mais facil! =P

 

Pra quem quiser:

<div class="modas" onmouseout="$(this).animate({width:'51px'}, 50);"  onmouseover="$(this).animate({width:'300px'}, 200);"></div>