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
alessio.... on 
gffh on 
Pietro on 
fedeweb on 
icosensei on 
HTML5 Please – Come Usare Tutte le Proprietà HTML5 e CSS3 | Antonio Ghidara | ADV solution on 
3 giugno 2010 at 10:05
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.
3 giugno 2010 at 20:37
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?
3 giugno 2010 at 23:45
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
8 giugno 2010 at 10:39
Ciao Daniele! hai pubblicato? dai che sono curioso di vedere!
9 giugno 2010 at 17:42
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.
10 giugno 2010 at 15:55
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!
3 agosto 2010 at 21:45
ottimo tutorial !
5 agosto 2010 at 20:16
Ciao Phil e benvenuto nel blog
Hai applicato questo plugin in qualche tuo progetto?
5 agosto 2010 at 20:23
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
12 ottobre 2010 at 20:03
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
7 febbraio 2011 at 17:10
sei bravo a scopiazzare
7 febbraio 2011 at 18:58
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
22 luglio 2011 at 19:01
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
22 luglio 2011 at 19:13
@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”);
});
});