Visita <a href="http://www.liquida.it/" title="Notizie e opinioni dai blog italiani su Liquida">Liquida</a> e <a href="I widget di Liquida per il tuo blog">Widget</a>

Tutorial jQuery – Metodo Animate Effetto Hover

Scritto da fedeweb il 03 aprile 2012 con 4 Commenti | Pubblicato in Tutorial Jquery


Per i tutorial jQuery, oggi voglio spiegarti come ricreare l’effetto di hover che puoi vedere nel sito di Hitmo quando si passa sopra i box.

Tutorial jQuery - Metodo Animate Effetto Hover

Per ottenere questo effetto si possono utilizzare le proprietà css3 transition e transform, però con problemi di compatibilità con Internet Explorer.

Lo stesso effetto può essere ottenuto con la funzione jQuery Animate, con piena compatibilità con tutti i browser.

Il codice per ottenere l’effetto è talmente semplice che non ha quasi bisogno di spiegazioni:

$("#animato").mouseenter(function(){
  	$(this).animate({top: '10'}, 300 );
});

$("#animato").mouseleave(function(){
    $(this).animate({top: '0'}, 300 );
});

Quando il cursore è sopra il div #animato, questo si sposta in basso di 20px, altrimenti torna alla posizione di origine.

Inoltre dovrai avere l’accortezza di impostare la proprietà position:relative, al div a cui applichi l’effetto.

Ti invito a leggere la documentazione del metodo animate(), con il quale si possono creare diverse animazioni ;)

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

4 Commenti

  1. Questo è il primo sito a scorrimento orizzontale, che anche espandendo la finestra del browser per 2 monitor ( affiancati ), non mostra le schede successive o precedenti.
    Come si fa?? =)

  2. Veramente quel sito non é proprio fantastico… provate a rimpicciolire la finestra del browser ed a ridurla orizzontalmente… tutti gli “width: 100%” delle fullbar vanno a farsi benedire.

  3. Mancherebbe il metodo stop() per evitare che più hover vadano in coda ;)

    • Graze Andrea per la segnalazione!

Trackbacks & Pingbacks

  1. Guida jQuery – Animazione del Colore di Sfondo | Fedeweb
  2. Web Banner: Come realizzarli e farli Cliccare

Lascia un commento