Jquery.animate , problema com objectos

[charly]

Olá pessoal,

estou a usar Jquery para fazer uma pequena animação após o clique num botão/imagem.

Passando a explicar, como podem ver na imagem abaixo ao clicar no botão CONTA, uma DIV faz slide para apresentar um pequeno formulário. Estou a usar a função animate para trazer essa mesma DIV para áreas visiveis, pois encontra-se escondida em valores negativos (top: -250px).

http://img834.imageshack.us/img834/1387/96047865.png

O grande problema é que ao colocar o cursor sobre um dos elementos presentes na DIV, como os inputs e buttons, a DIV volta a recolher, quando essa função so deveria correr quando o cursor sai da DIV.

http://img845.imageshack.us/img845/443/77334616.png

Como posso corrigir esta questão?

[yoda]

Podes registar um evento que seja activado pelo botão também e que não deixe a div ficar invisível enquanto o cursor estiver por cima.

[clera]

boas, tens outra opçcão mais simples, que é teres uma div invisível por baixo da que faz slide.

O slide só recolhe quando fizeres hover à div invisível 😉

pelo menos a mim parece-me mais simples..

[charly]

Este é o código que se encontra na DIV negra, algo que tenho de corrigir?

<div id="slide-search" onmouseout="$(this).animate({'top':'-200px'}, {queue: false, duration: 1500, easing: 'easeOutQuad'});">
	    <div style="width: 900px; margin: 0 auto;">
		    <?php include './pages-e/search.php'; ?>
	    </div>
    </div>

[clera]

mas esse é o tal que ao ires aos campos de input e butoes desaparece certo?

para mim seria uma coisa deste género 😉

<div id="slide-search">
<div style="width: 900px; margin: 0 auto;">
 <?php include './pages-e/search.php'; ?>
</div>
<div style="width: 100%; position:absolute; height:100%; z-índex:-1; opacity:0"  id="slide-close" onmousehover="$('#slide-search').animate({'top':'-200px'}, {queue: false, duration: 1500, easing: 'easeOutQuad'}, function(){$('#slide-close').css('display', 'none')});"> </div>
</div>

[charly]

@clera, não há maneira de manter a estrutura actual onde o onmouseout ignore o conteúdo da div'?

[brunoais]

Aconselho vivamente a não usar os atributos on*.

Usem os métodos do DOM em vez disso.

[charly]

@brunoais , o jQ DOM pode resolver esta situação?

[brunoais]

Sim. o jQuery usa o DOM para manipular o HTML.

Pessoalmente prefiro não usar o jQuery a n ser para animações mais complicadas, de qq modo.

[charly]

Obrigado a todos, irei optar por ter um objecto com um onclick para efectuar o fecho.