Ir para conteúdo

POWERED BY:

Arquivado

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

tiujhou

[Resolvido] Animate propagar por uma vez

Por , em Javascript

Recommended Posts

tiujhou    7

tiujhou
Postado

Estou fazendo um menu (Drop down)Jquery , onde ao passar o mouse por cima do botão ele abre um DIV logo abaixo, e nessa div contem a lista de links... A unica coisa que faço é inserir um Display:block na lista...

 

Dai inseri um Animate para dar opacidade(mouseover) e retornar ao normal(mouseout)... mas acontece que quando passo o mouse na DIV de lista e retono para o botão do menu, ele faz essa animação... e eu gostaria que esta soh fizesse se o mouse viesse de todas as outras DIVs, menos da que esta a Lista...

 

Existe alguma forma deu bloquear o animate que vem da DIV lista... Ateh +++

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiujhou    7

tiujhou
Postado

O código é basicamente este... Na realidade dei um enxugada no jquery, pois haviam coisas que eram do submenu ... Mas a da questão do efeito tipo flash(opacidade) esta ai... Eu tentei inserir algumas classes para facilitar o uso...

 

Mouse over #menu .um = .um .btn1 .btn3

Mouse fora das div #menu .um e #sub-menu = .um

Mouse over na DIV #sub-menu = .um .btn1 .btn2

 

Como da para ver, a class ".um" sempre aparece, já a class ".btn1" aparece apenas quando passar o mouse sobre o "#submenu" e ".um", já a class ".btn3" aparece apenas quando passar o mouse na class ".um" e por ultimo, a class ".btn2" aparece apenas quando passar o mouse sobre a div "#submenu"...

 

Como eu não conheço nenhuma função que una 2 divs, enquanto o mouse esteja emcima de uma dessas, ele não realiza o efeito do .animate, por isso que estou tentando utilizar as class...

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.1.js"></script>

</head>

<body>
<script type="text/javascript">
$(document).ready(function(){


$(".um").hover(function(){

$("#sub-um").css({'display':'block', 'visibility' : 'visible' });
$(this).addClass("btn1 btn3").removeClass("btn2");

//efeito flash
$(".btn1").stop().animate({ opacity: 0 }, 180, function(){
	$(this).stop().animate({"opacity": 1}, 500);		
});



//sub menu emcima
$("#sub-um").hover(function(){

	$("#sub-um").stop().animate({
		left: +position.left+"px",
	}, 500, function(){
		$(".um").addClass("btn1 btn2").removeClass("btn3");
	});

}, function(){

	//Sub menu ao retirar o mouse

	$("#sub-um").stop().animate({
		left: +menuUm+"px",
		opacity: 0
	}, 500, function(){
		$("#sub-um").css({'display':'none', 'visibility' : 'hidden' });
		$(".um").removeClass("btn1 btn2");

	});

});


//Retirar o mouse do menu	
},function(){
$(this).removeClass("btn1 btn3");

       //Efeito Flash ao retirar o mouse do botão
$(this).stop().animate({ opacity: 0 }, 180, function(){
	$(this).stop().animate({"opacity": 1}, 500);	
});



});
//fim


});
</script>

<!--box-menu-->
<div id="box-menu">

<div id="menu">
<ul>
   	<li class="um">Educação Básica</li>
       <li class="dois">Cursos Técnicos</li>
       <li class="tres">Graduação</li> 
       <li class="quatro">Pós-graduação</li>
   </ul>
</div>

<div id="sub-menu">
<div id="sub-um" class="sub-um" style="display:none;" >
   	<ul>
       	<li>Ensino Fundamental em Carnaveni</li>
           <li>Ensino Médio Salinha</li>
           <li>Educação Infantil Iabaia</li>
           <li>Ensino Fundamental itabaiana</li>
       </ul>
   </div>
</div>

</div>
<!--box-menu-->


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Seu HTML está incorreto, quando se quer fazer um dropdown com sub-menu, deve colocar o sub-menu, dentro da li que deve exibir este sub-menu, ex:

<nav id="menu-1" class="menu">
   <ul>
       <li class="menu-item">
           Sub Menu Title
           <ul class="sub-menu">
               <li class="sub-menu-item"><a href="#">SubMenu Link I</a></li>
               <li class="sub-menu-item"><a href="#">SubMenu Link II</a></li>
               <li class="sub-menu-item"><a href="#">SubMenu Link III</a></li>
               <li class="sub-menu-item"><a href="#">SubMenu Link IV</a></li>
           </ul>
       </li>
       <li class="menu-item"><a href="#">Link I</a></li>
       <li class="menu-item"><a href="#">Link II</a></li> 
       <li class="menu-item"><a href="#">Link III</a></li>
   </ul>
</nav>

 

E o teu css para aparecer o submenu seria basicamente:

.sub-menu {
   display: none;
}
.menu-item:hover .sub-menu {
   display: block;
}

 

Apartir daí fazer as animações seria muito mais simples, pois não envolveria este monte de seletores que você está utilizando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiujhou    7

tiujhou
Postado

Realmente, achava que num dava influencia dessa maneira que tinha feito.... Mas agora ta resolvido... o código Jquery, esta muito menor e único, já o CSS que fez toda a parte que estava fazendo com jquery(display:block)...

 

Obrigado e ateh +++....

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