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.