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.
