Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Everton Figueiredo

[Resolvido] Eventos Jquery

Por , em Javascript

Recommended Posts

Everton Figueiredo    0

Everton Figueiredo
Postado

Boa tarte pessoal,

 

Estou com problema com eventos mouse, tenho uma div#box dentro dela tenho outra div.content sendo esta está desabilitada (dispplay:none), o que eu quero fazer é que quando ao passar o mouse em cima da div#box habilite a div.content e quando o mouse sair da área da div#box desabilite a div.content com tempo me 4 segundos.

 

Vou passar o código abaixo o que eu fiz está funcionando legal, só está com problema que quando eu retiro e volto novamente a passar mouse em cima da div#box a ação do evento mouseleave ainda opera e neste caso teria que ser anulada.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#box').mouseenter(function(){	

    $('.content').slideDown(300);

}).mouseleave(function(){

	setTimeout(function(){
        $('.content').slideUp(300);
	}, 3000);

});

});
</script>
<style type="text/css">
  #box{ background:#fc0; width:300px; height:300px;}
  .content{ background:#000; color:#fff; display:none;}
</style>
</head>

<body>

 <div id="box">
     <div class="content">Conteúdo</div>
 </div>

</body>
</html>

 

 

Vlw pessoal !!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pelo que entendi da tua descrição, um .stop() resolve.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Everton Figueiredo    0

Everton Figueiredo
Postado

Mas como ficaria a estrutura William?

 

Consegui pessoal, anulei otempo com o método clerTimeout.

 

$('#box').hover(function(){

 

$('.content').slideDown(300);

clearTimeout(s);

 

}, function(){

 

s = setTimeout(function(){

$('.content').slideUp(300);

}, 3000);

 

});

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Só uma coisa, no primeiro hover que você efetuar a variavel s estará como undefined, melhor usar:

if(typeof s !== 'undefined'){
   clearTimeout(s);
}

 

Outro 'problema' com o teu código é que você está setando a variável s de forma global, e não dentro do escopo da função desejada, isso não importa muito, mas não é uma boa prática, o melhor seria usar da seguinte forma:

 

 

$(document).ready(function(){
   var s = null;
   $('#box').hover(function(){
       $('.content').slideDown(300);
       if(s !== null){
           clearTimeout(s);
       }
   }, function(){
       s = setTimeout(function(){
           $('.content').slideUp(300);
       }, 3000);
   }); 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito