[Resolvido]jQuery/javascript dúvida

unsilent

Power Member
Boas,tenho este código:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
[COLOR="Red"][B]  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
i=1;
$(document).ready(function(){
//=======
		$("div.overout").mouseover(function(){
		i = 0;
		$("div.in",this).animate({opacity: 0.0}, 500);
		
		});		
		
		
		$("div.overout").mouseout(function(){
		i=1;
		$("div.in",this).animate({opacity: 1.0},500);
		
		});
	
		


//======
});
</script>[/B][/COLOR]
  <style>
div.out {
width:100px;
height:80px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:100%;
height:100%;
background-color:#FFCC00;
margin:0px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
</head>
<body>
  
<div class="out overout">
<div class="in">
</div>
</div>
<div class="out overout">
<div class="in">
</div>
</div>
<div class="out overout">
<div class="in">
</div>
</div>


</body>
</html>
(está ai o html todo só para contextualizar)

A minha intenção é que o comportamento das div com classe "in" seja similar,ou pelo menos parecido ao deste site:
http://dragoninteractive.com/
Ou seja com o evento mouseover a opacity diminui até 0 em x tempo, e com o mouseout aumenta ate 1 em x tempo.

Agora o problema é que se o user mover o rato n vezes sobre as div's elas vão fazer fade in e fade out n vezes, quando eu só quero que isto ocorra uma vez.Já tentei com vários if's, mas sinceramente faltam-me noções básicas de programação...
Obrigado desde já.
 
Última edição:
Não sei se percebi bem a tua dúvida, mas tenta alterar para isto as linhas correspondentes:

$("div.in",this).stop().animate({opacity: 0.0}, 500);


$("div.in",this).stop().animate({opacity: 1.0},500);
 
Back
Topo