Tutorial jQuery – Metodo Animate Effetto Hover
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.
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
[…] il metodo animate(), già affrontato in passato per ottenere un effetto fade animato, con il quale cambieremo il colore di […]
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?? =)
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.
[…] 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 […]
Mancherebbe il metodo stop() per evitare che più hover vadano in coda 😉
Graze Andrea per la segnalazione!