Fw

Wordpress Creative Developer

Tutorial jQuery – Metodo Animate Effetto Hover

  • 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 😉

6 Commenti

  1. […] il metodo animate(), già affrontato in passato per ottenere un effetto fade animato, con il quale cambieremo il colore di […]

  2. 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?? =)

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

  4. […] elenca regole di buon senso per realizzare dei buoni banner. Si tratta di 10 regole. E alla fine consiglia di utilizzare il metodo Hover per la creazione di banner, senza però spiegare come […]

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

Scrivi un commento

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