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









26 luglio 2012 at 15:08
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?? =)
24 agosto 2012 at 18:32
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 dicembre 2012 at 16:46
Mancherebbe il metodo stop() per evitare che più hover vadano in coda
4 dicembre 2012 at 09:52
Graze Andrea per la segnalazione!