[Jquery] div alternativi con mouseover/mouseout

[Andreau]

Salve. Vorrei chiedere come realizzereste una cosa del genere:
- in un riquadro di determinate dimensioni,
- c'è un link (testo + immagine come sfondo nel padding) che occupa solo una parte del riquadro;
- quando si va sopra il link, vorrei che, al di sopra del primo riquadro (coprendo quindi anche il link), ne comparisse un secondo delle stesse dimensioni e che questo poi scomparisse quando col mouse si esce dalla sua area, quindi un tipico esempio di mouseover/mouseout.

Tramite solo CSS funziona perfettamente, mi piacerebbe però dare un po' di animazione all'effetto comparsa/scomparsa del div tramite jquery e ho fatto un po' di tentativi, ma ci sono degli effetti strani:
- muovendosi col puntatore del mouse nell'area del div in sovraimpressione, andando in alcune zone il div scompare, come se partisse l'evento di mouseout;
- ogni tanto fa un po' di flickering (scintillio).

Il codice html è tipo il seguente:

 
<div id="container">
     Link
     <div class="overlay">..............</div>
</div>

e il codice js che ho messo a punto è il seguente:

  
$(document).ready(function() {
    $('div#container a').mouseover(function() {
	$('div.overlay').stop().show(); 
    });
    $('div.overlay').mouseout(function() {
	$(this).stop().hide();
    });
});

Cosa sto sbagliando?
Grazie

[Andreau]

Nessuna idea? Grazie