[jQuery] slide di un div all'interno di un altro div

[fehu]

[jQuery] slide di un div all'interno di un altro div

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

[fehu]

mi autorispondo
alla fine dopo averci sbattuto la testa per un'ora ho trovato la soluzione in un minuto...

per chi fosse interessato qui il codice ripulito e funzionante

    $('div.anteprima_testo').each(function (i) {
      $(this).mouseenter(function() {
        $(this).find('.testo').stop().animate({'top':($(this).outerHeight() - $(this).find('.testo').outerHeight()) + 'px'}, 300);
      });
        
      $(this).mouseleave(function() {
        $(this).find('.testo').stop().animate({'top': $(this).outerHeight() + 'px'}, 900);
      });
    });

[vnotarfrancesco]

Ciao fehu, innanzitutto benvenuto nel forum gt.
Grazie per aver condiviso la soluzione al tuo problema, ti auguro una buona permanenza tra di noi.

Valerio Notarfrancesco