Fw

Wordpress Creative Developer

Tutorial jQuery – Fade Hover Animato Su Immagini, Testi e Div

  • Tutorial Jquery
  • -

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.

Tutorial jQuery - Effetto Fade Hover

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.

Angelina Jessica Rihanna Belen

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.

Scarica il sorgente

Guarda il tutorial

Via: hvdesigns

21 Commenti

  1. 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.

  2. 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. 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

  4. Ciao Daniele! hai pubblicato? dai che sono curioso di vedere!

  5. 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.

  6. 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!

  7. ottimo tutorial !

  8. Ciao Phil e benvenuto nel blog 😉

    Hai applicato questo plugin in qualche tuo progetto?

  9. 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

  10. 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 🙂

  11. […] 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. […]

  12. sei bravo a scopiazzare

  13. 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 😉

  14. 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

  15. @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”);
    });
    });

  16. 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

  17. 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 🙁

  18. Ciao Grande tutorial. Volevo sapere se era possibile quando si passava con il mouse sopra all’immagine far uscire un piccolo testo 😀 Grazie

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *