• User

    [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 :mmm:


  • User

    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);
          });
        });
    
    

  • ModSenior

    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