Tenho três links: Gato, Cachorro, Cobras. Quando passo o mouse sobre cada um, o conteúdo relacionado a cada link deve mudar.

Então, se eu passar o mouse sobre o gato, o conteúdo do gato será exibido; se eu passar o mouse sobre o cachorro, o conteúdo do gato desaparecerá suavemente e o conteúdo do cachorro aparecerá ... e assim por diant

Links are: Dog   Cat  Snake

<div>
  <span style="display:none;"> Cat Content</span>
  <span style="display:none;"> Dog Content</span>
  <span style="display:none;"> Snake Content</span>    
</div>

Como faço para que isso funcione plenamente, com um desbotamento suave?