Oggi iniziamo la nostra rubrica di guide dedicate a jQuery, questa fantastica tecnlogia che ci permette di creare animazioni davvero complesse in poco tempo e dal notevole impatto visivo.
Per iniziare vedremo come animare un b0x di testo facendolo apparire quando clicchiamo su un link.
Creiamo un file html e un foglio di stile che useremo per inizializzare il box.
-
Iniziamo con l’Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animazione Jquery</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function mostra_box () {
$("#box").show("slow");
}
</script>
</head>
<body>
<li><a href="javascript:mostra_box();">Mostra il box </a></li>
<div id="contenitore">
<div id="box"><H1>TargetWeb.it - Prova box Jquery</H1>
<p align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. </p>
</div>
</div>
</body>
</html>
Nel dettaglio abbiamo creato un div chiamato #box e un link che rimanda al codice jQuery posizionato nell’head della pagina.
Nel dettaglio il codice jQuery:
- function mostra_box () { —> Viene creata una funzione richiamabile in qualsiasi momento nel documento ( nel nostro caso la funzione viene richiamata al click sul nostro link)
- $(“#box”).show(“slow”); —-> $ e’ un alias di “jQuery” e serve per richimare la variabile “box” (che di fatto e’ un div html) e animarla con “slow”. Grazie al comando “show” il div ( nascosto precedentemente tramite il comando css display: “none” ) viene visualizzato finalmente sullo schermo.
-
Un po di stile con i CSS
body{
margin:0;
padding:0;
text-align:center;
}
ul {
list-style-type: disc;
padding: 10px;
background-color:#FFFFFF;
}
ul li {
margin-top: 3px;
margin-bottom: 3px;
line-height: 16px;
}
#box {
width:400px;
height:200px;
background-color:#CCCCCC;
border:1px solid #666666;
display:none;}/*rende il box invisibile finche non viene premuto il tasto*/
La parte piu’ importante di questo codice e’ l’ultima parte con il comando display:none; che rende il div invisibile sul foglio finche’ non viene premuto il link.
Potete scaricare i sorgenti qui.
Nella prossima guida vedremo come animare il box di testo facendolo scomparire e riapparire grazie al comando toggle.
