Tutorial jQuery – Fade Hover Animato Su Immagini, Testi e Div
Appuntamento con i tutorial jquery, dove oggi andiamo a vedere come ottenere un effetto fade animato al passaggio del mouse sopra un elemento, in particolare sopra una foto, testo o un div.
Guarda subito l’esempio per capire di cosa si tratta.
Come vedi l’effetto fade lo puoi applicare alle immagini, ai testi oppure ai div. E la cosa più importante è che funziona anche con Internet Explorer 6.
Ora andiamo a vedere quali sono i passi per applicare l’effetto alle immagini. Poi per i testi e i div si procede allo stesso modo.
Passo 1. Inizializzazione degli script
Il primo passo, come al solito è quello di andare a inserire tra i tag head le righe di codice necessarie per inizializzare gli script.
Passo 2. Inserisci le immagini
Ora inseriamo il codice per inserire delle immagini.
Come vedi è stata messo per ogni immagine l’attributo class=”foto_fade” questo perchè altrimenti non potremmo applicare l’effetto fade.
Passo 3. Applichiamo l’effetto
Ora apri il file custom.js. In questo file ti basterà modificare l’elemento a cui applichi l’effetto. Se anche tu hai messo come class “foto_fade”, allora non devi modificare nulla, altrimenti dovrai mettere l’atrributo class che hai scelto per le tue immagini.
//Effetto fade applicato alle foto
$(function() {
// Opacità delle immagini impostate al 50%
$(".foto_fade").css("opacity","0.5");
// Al passaggio del mouse
$(".foto_fade").hover(function () {
// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// quando il mouse non è sull'elemento
function () {
// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
Finito! Per applicare l’effetto al testo o ai div si procede allo stesso modo, e comunque puoi scaricare il sorgente per vedere l’effetto applicato nei 3 casi.
Via: hvdesigns
21 Commenti
Complimenti per il sito.
Un esempio concreto di perfezione, professionalità, serietà e chi più ne ha più ne metta.
Ottimo tutorial!!
L’ ho messo su uno dei miei siti e funziona alla grande.
Grazie per la preziosa info.
Ciao Daniele e benvenuto nel blog 😉
Ti ringrazio pe i complimenti, fanno sempre piacere! Puoi mandarmi il link del sito che sono curioso di vedere?
Ciao ho applicato l’ effetto su ben 2 pagine.
Ma l’ ho messo su una versione beta, ancora non accessibile dall’ esterno.
Domani pubblicherò il tutto e posto da subito le pagine con tale effetto.
Ciao
Ciao Daniele! hai pubblicato? dai che sono curioso di vedere!
Ciao
Finalmente si è portato in produzione il sito.
Ecco i link:
http://www.curiosandofree.com – qui trovi l’ effetto applicato al pulsante “guarda il giornale” (precisamente a un immagine) (lo trovi in basso).
http://www.curiosandofree.com/storico-giornale.html – Quì l’ ho applicato ai box (precisamente ai div).
Ciao e davero grazie per il tutorial come vedi mi è tornato molto utile.
Si devo dire che hai sfruttato molto bene il tutorial, specialmente nella pagina “storico-giornale”. ben fatta! 😉 è bello vedere questi tutorial applicati su esempi concreti.
Se qualcun’altro ha sfruttato questa tecnica o altre di cui si è parlato nei tutorial lo dica pure nei commenti!
ottimo tutorial !
Ciao Phil e benvenuto nel blog 😉
Hai applicato questo plugin in qualche tuo progetto?
Ciao Fede =)
si, sto lavorando al mio sito personale e sto cercando di andare un pò oltre, provando a mischiare un pò di roba come jquery, Css3, html5..
ovviamente tutto con coerenza e senza esagerare. punto all’essenziale, quando l’idea è buona. quando lo completo te lo linko.
grazie ancora
Bellissimo! L’ho applicato alle miniature di 4 mie fotografie… decisamente meglio le tue ragazze dell’esempio, non c’è dubbio, ma ho il morale alto perchè in 5 minuti ho applicato l’effetto!!! Grazie Fede 🙂
[…] Portfolio: qui invece si è usato jQuery per abbassare l’opacità nei div e “illuminando” quello su cui abbiamo il puntatore del mouse. Per ottenere questo effetto ti consiglio di andare a leggere questo tutorial. […]
sei bravo a scopiazzare
Ciao bg e benvenuto nel blog 😉
Mmmm io non lo chiamerei scopiazzare, anche perchè ho citato la fonte. Io ho voluto spiegare come utilizzare il plugin per quelle persone che non sanno l’inglese e per dare un supporto in italiano a chi vuole utilizzare il plugin, tutto qui 😉
Ho scoperto ora il tuo sito
Complimenti!!!
una domanda da principiante:
e’ possibile fare questo effetto al contrario?
cioe’ quando il mouse va sopra si SCHIARISCE?
grazie
Roberto
@roberto
Certo!
Inverti i valori della proprietà opacity:
//Effetto fade applicato alle foto
$(function() {
// Opacità delle immagini impostate al 50%
$(“.foto_fade”).css(“opacity”,”1″);
// Al passaggio del mouse
$(“.foto_fade”).hover(function () {
// imposta l’opacità al 100%
$(this).stop().animate({
opacity: 0.5
}, “slow”);
},
// quando il mouse non è sull’elemento
function () {
// imposta l’opacità al 50%
$(this).stop().animate({
opacity: 1
}, “slow”);
});
});
Ciao, anche se l’articolo è di qualche tempo fa spero tu possa aiutarmi comunque, perchè proprio non ci arrivo
sto cercando di utilizzare il tuo script su un menù, l’HTML è questo
Lo script non è stato modificato, l’effetto viene però applicato alla classe “.tile”
Non funziona e non capisco cosa sbaglio, questo è il css relativo al div a cui l’effetto è applicato
div#menu_background{
background: #4c3721;
opacity: 0.8;
height: 60px;
width: 100%;
top: 0;}
}
Cosa vedi di sbagliato? Aiutami perchè non so più cosa provare!!
ciao e grazie
.. le due parentesi graffe forse.. prova a vedere se risolvi 🙂
l’HTML
Salve, bella guida, stavo provando ad applicare il tutto, ma mi chiedevo come si può togliere la cornicina attorno alle immagini. Grazie. Saluti.
Francesco
Sorry, risolto, vedevo nel file sbagliato … dormire poco di notte non è mai una buona cosa 🙁
Ciao Grande tutorial. Volevo sapere se era possibile quando si passava con il mouse sopra all’immagine far uscire un piccolo testo 😀 Grazie