- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- [jQuery] slide di un div all'interno di un altro div
-
[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
-
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); }); });
-
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