[Resolvido] fadeIn e fadeOut entre 2 elementos

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');
});