[Resolvido] [jQuery] Problema com o .animate() ao mecher a div

[Teixeira Junior Scorpion 1]

Bom estou tentando fazer um código

Para que a div que eu queira se mecha no momento em que passar o mouse por cima dela

e volte ao normal depois de tirar o mouse de cima dela

<style>
#div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width:600px;
height:600px;
background-color:#66CCFF;
position:absolute;
left:10px;
}

</style>
<script src="library/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

$('#div').mouseover(function() {

		$("#div").animate({"left": "+=100px"}, "slow");	

	});

			//Quando o Mouse sair da div ela volta pra posição normal XD
			$('#div').mouseout(function(){
					$('#div').animate({"left:" "-=100px","slow"});

			});


});

</script>

<div id="div">
Testando XD
</div>

o Problema é o seguinte Toda vez que passa o mouse por cima

vai adcionando + 100px para a esquerda , eu queria que isso acontecesse apenas umas vez

, e quando coloco o mouseout(); a div nao se meche mais

Desde Já Agradeço

Grande Abraço!

[P@trique 0]

Da uma olhada aqui: http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm veja o codigo fonte da pagina.

[Everaldo Grunge 2]

Bom estou tentando fazer um código

Para que a div que eu queira se mecha no momento em que passar o mouse por cima dela

e volte ao normal depois de tirar o mouse de cima dela

<style>
#div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width:600px;
height:600px;
background-color:#66CCFF;
position:absolute;
left:10px;
}

</style>
<script src="library/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

$('#div').mouseover(function() {

		$("#div").animate({"left": "+=100px"}, "slow");	

	});

			//Quando o Mouse sair da div ela volta pra posição normal XD
			$('#div').mouseout(function(){
					$('#div').animate({"left:" "-=100px","slow"});

			});


});

</script>

<div id="div">
Testando XD
</div>

o Problema é o seguinte Toda vez que passa o mouse por cima

vai adcionando + 100px para a esquerda , eu queria que isso acontecesse apenas umas vez

, e quando coloco o mouseout(); a div nao se meche mais

Desde Já Agradeço

Grande Abraço!

 

O erro tá na cara:

 

//Quando o Mouse sair da div ela volta pra posição normal XD
$('#div').mouseout(function(){
   $('#div').animate({"left:" "-=100px","slow"}); // SLOW dentro das chaves do css? Rsrsr
});

 

O correto:

 

//Quando o Mouse sair da div ela volta pra posição normal XD
$('#div').mouseout(function(){
  // Agora sim, adicionei o "this", dessa forma pode-se trabalhar com classes tranquilamente.
   $(this).animate({"left:" "-=100px"},"slow"); 
});

 

Tenta usar mouseenter() e mouseleave() a meu ver são melhores que over e out. Dentro do evento do mouse use this ao invés de "#div" novamente.

[Teixeira Junior Scorpion 1]

não funcionou nenhum dos dois acima

[Everaldo Grunge 2]

não funcionou nenhum dos dois acima

//Quando o Mouse sair da div ela volta pra posição normal XD
$('#div').mouseout(function(){
  // Agora sim, adicionei o "this", dessa forma pode-se trabalhar com classes tranquilamente.
   $(this).animate({"left:" "-=100px"},"slow"); // <- ta errado ainda
});

 

Meu "correto não estava tão correto.

 

//Quando o Mouse sair da div ela volta pra posição normal XD
$('#div').mouseenter(function(){
  // Agora sim, adicionei o "this", dessa forma pode-se trabalhar com classes tranquilamente.
   $(this).animate({"left:"+=100px"},"slow"); 
});
$('#div').mouseleave(function(){
  // Agora sim, adicionei o "this", dessa forma pode-se trabalhar com classes tranquilamente.
   $(this).animate({"left":"-=100px"},"slow"); 
});

 

Agora sim.

[Teixeira Junior Scorpion 1]

Fazendo da maneira que te sugeri... ficaria assim:

 

http://jsfiddle.net/AwKuE/

 

Fazendo da maneira que te sugeri... ficaria assim:

 

http://jsfiddle.net/AwKuE/

Poxa mano valeu mesmo

era Isso que eu tava tentando fazer

Grande abraço!

 

:thumbsup: