[Resolvido] fadeIn e fadeOut entre 2 elementos

[MBarros 0]

Pessoas,

 

Por questão de testes para um outro projeto, possuo um link chamado X que quando posiciono o ponteiro do mouse sobre ele, através do fadeOut ele gradativamente some e dá lugar ao link Y, que por sua vez aparece gradativamente no lugar de X (fazendo tudo isso através do hover). Ao retirar o ponteiro do mouse da área do link X e Y, utilizando desta vez mouseout, oculto o link Y com fadeOut para dar lugar novamente ao link X utilizando o fadeIn.

 

Basicamente: hover em X --> fadeOut --> X desaparece --> fadeIn --> Y aparece no lugar do X --> mouseout em Y (quando o ponteiro sai do link) --> fadeOut Y --> fadeIn X --> X aparece no lugar de Y (ou seja, volta ao estado inicial).

 

Meu problema está em quando tiro o ponteiro do mouse do link em seu estado Y, ele volta para o estado X, mas pisca e retorna para o estado Y. Como resolver isso, ou seja, como parar a transição para que as "animações" respeitem cada comando (hover, mouseout)?

 

$('#mostrar').hover(function(){
  $(this).fadeOut('slow');
});	
	
$('#mostrar').hover(function(){
  $('#ocultar').fadeIn('slow');
});
	
$('#ocultar').mouseout(function(){
  $('#ocultar').fadeOut('slow');
  $('#mostrar').fadeIn('slow');
});

[MBarros 0]

Up! :P

 

Problema resolvido!

 

A função stop() do jQuery solucionou meu problema!

 

http://api.jquery.com/stop/