Pubblicato da: fedeweb | luglio 21, 2008

Effetto hover animato con 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=”https://fedeweb.wordpress.com/”>Home</a&gt;
<em style=”top: -85px; display: none;”>Vai a fedeweb</em>
</li>
<li>
<a href=”https://fedeweb.wordpress.com/tutorial/”>Tutorial</a&gt;
<em style=”display: none; top: -85px;”>Tutorial su gimp, flash, javascript</em>
</li>
<li>
<a href=”https://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

Advertisements

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: