Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

charly

Jquery.animate , problema com objectos

Recommended Posts

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).

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.

77334616.png

Como posso corrigir esta questão?

Share this post


Link to post
Share on other sites
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..

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
charly

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

Share this post


Link to post
Share on other sites
brunoais

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

Usem os métodos do DOM em vez disso.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
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.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
charly

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.