Fw

Wordpress Creative Developer

Effetto hover animato con jquery

  • Plugin jQuery
  • -

Oggi vediamo come creare un effetto hover animato, sfruttando jquery, di cui è stata già vista un’applicazione qualche settimana fa. Ecco un esempio di quello che andremo a costruire.

I passi da seguire per ottenere questo effetto sono molto semplici:

1. Tra i tag <head> e </head> dovete mettere il codice per installare jquery:

<script type=”text/javascript” src=”script/jquery.js”></script>

Poi bisogna scrivere il codice necessario per ottenere l’effetto hover visto nell’esempio:

<script type=”text/javascript”>
$(document).ready(function(){

$(“.menu a”).hover(function() {
$(this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”);
});

});
</script>

2. Nel  codice html, dovremo aggiungere la descrizione che dovrà comparire per chiarire dove ci porterà il link che intendiamo visitare; questa descrizione la dovrete aggiungere tra i tag <em>:

<ul class=”menu”>
<li>
<a href=”http://fedeweb.wordpress.com/”>Home</a>
<em style=”top: -85px; display: none;”>Vai a fedeweb</em>
</li>
<li>
<a href=”http://fedeweb.wordpress.com/tutorial/”>Tutorial</a>
<em style=”display: none; top: -85px;”>Tutorial su gimp, flash, javascript</em>
</li>
<li>
<a href=”http://fedeweb.wordpress.com/video-tutorial/”>Video tutorial</a>
<em style=”display: none; top: -85px;”>Video tutorial su gimp</em>
</li>
</ul>

Questo è un altro modo per rendere i nostri siti web più dinamici e piacevoli per il visitatore. Prossimamente vedremo altre applicazioni di jquery.

Scarica il sorgente

Guarda l’esempio

1 commento

  1. Ciao, complimenti per il sito e per la tua attività di CONDIVISIONE 🙂
    Ho scaricato l effetto sopra descritto e lo trovo molto utile, vorrei chiederti però come posso fare per far in modo che l effetto appaia sotto il menu e non sopra.Grazie mille e buona giornata

Scrivi un commento

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