Tengo tres enlaces, Gato, Perro, Serpientes. Cuando paso el mouse sobre cada uno, el contenido relacionado con cada enlace debe cambiar.

Así que si paso el mouse sobre el gato, aparecerá el contenido del gato, si paso el mouse sobre el perro el contenido del gato desaparecerá suavemente y el contenido del perro aparecerá ... y así sucesivamente.

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>

¿Cómo consigo que esto funcione completamente, con un poco de desvanecimiento suave?