ciao
per presentare l'anteprima di un articolo utilizzo un div contenente come sfondo l'immagine dell'articolo stesso, e poi l'anteprima del testo posizionata in maniera assoluta in modo che sia appena al di sotto del div principale, e che al passaggio del mouse scorra tramite .animate()
stile
.anteprima_testo {height:100%;}
.anteprima_testo .titolo {position:absolute; top:10px; left:10px; border-radius:5px; padding:5px; background:#000; opacity:.80; filter:alpha(opacity=80); filter:"alpha(opacity=80)"; font-size:18px; color:#FFF;}
.anteprima_testo .testo {color:#FFF; background:#000; padding:10px; position:absolute; top:230px; opacity:.90; filter:alpha(opacity=90); filter:"alpha(opacity=90)";}
html
<div class="anteprima_testo" style="background:url(immagini/art_1.jpg)">
<p class="titolo">E' finita la cartaigienica</p>
<p class="testo">testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima testo anteprima </p>
</div>
jQuery
$('.anteprima_testo').mouseenter(function() {
$(this).find('.testo').stop().animate({'top':($('.anteprima_testo').height() - $('.anteprima_testo .testo').height()) + 'px'}, 300);
});
$('.anteprima_testo').mouseout(function() {
$(this).find('.testo').stop().animate({'top': $('.anteprima_testo').height() + 'px'}, 900);
});
Nell'insieme funziona correttamente, ma se per caso il mouse si trova a sorvolare il box del testo, si innesca subito l'animazione di uscita, come se il mouse fosse uscito dal div principale.
Non riesco a spiegarmi come mai