Come Realizzare le Animazioni con JQuery e animate
E veniamo adesso a parlarvi di un lato molto importante di Jquery ossia le animazioni, e quando diciamo animazioni intendiamo proprio gli effetti dinamici che vediamo a video. Cerchiamo adesso un po’ come sono fatte le animazioni in Jquery partendo dagli effetti di base che sono proprio che sono le funzioni hide , show e toggle che vengono implementate nel seguente modo
.hide (duration [, callback])
.hide ( [duration] [,easing] [, callback])
.show (duration [, callback])
.show ( [duration] [,easing] [, callback])
.toggle (duration [, callback])
.toggle ( [duration] [,easing] [, callback])
Dove
Duration ha valori fast o slow fra apici o un numero in millescondi per esprimere la durata
Callback è un valore opzionale che indica la funzione invocata al termine dell’animazione
Esaing invece controlla la velocità dell’animazione dato che alcuni sistemi o piattaforme mobili come nel caso dei cellulari necessiatano velocità ridotte.
SLIDE con Jquery
Con Jquery è possibile fare una vera e propria in slide in maniera semplicissima grazie proprio alle funzioni native della libreria nel seguente e semplice modo.
SlideUp(duration [, callback])
.SlideUp ( [duration] [,easing] [, callback])
.Slidedown (duration [, callback])
.Slidedown ( [duration] [,easing] [, callback])
.SlideToggle (duration [, callback])
.SlideTogge ( [duration] [,easing] [, callback])
Dove I valori delle parentesi sono gli stessi dell’altro caso con la differenza che si ha Up quando la slide viene mostrata down quando si passa ad un’altra e toggle per invertire nel caso di due immagini.
Alla stessa maniera funziona la dissolvenza che in inglese si dice appunto fade e la sintassi dei suoi metodi è veramente molto simile e si ha .
.fadeUp(duration [, callback])
.fadeUp ( [duration] [,easing] [, callback])
.fadeIn (duration [, callback])
.fadeIn( [duration] [,easing] [, callback])
.fadeTo (duration [,opacity [, callback])
Con opacity che rappresenta un valore deciamle tra 0 e 1
Mentre per interrompere l’animazione si ricorre al metodo .stop che ha la seguente sintassi
.stop([queque] [clearQueque][,jumpToEnd])
Dove
- clearQueue indica se impostato a true, di Default è false, rimuove dalla coda tutte le animazioni
- jumpToEnd indica se completare o meno l’animazione true non la completa, false la completa
- queue è una stringa che indica il nome della coda da interrompere
come potete vedere abbiamo espressamente parlato di coda degli effetti, per un semplice motivo con Jquery si carica una coda di funzioni e dopo si interagisce con le funzioni che vi abbiamo spiegato sopra, vediamo meglio questo con un semplice esempio
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /><title>Guida jQuery – Animazioni 1</title>
<link rel=”stylesheet” href=”reset.css” type=”text/css” />
<link rel=”stylesheet” href=”base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<style type=”text/css”>
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;
}
</style>
<script type=”text/javascript”>
function mostra_box () {
$(“#box”).show(“slow”);
}
function nascondi_box () {
$(“#box”).hide(“slow”,function () {
alert(“Animazione conclusa!”);
});
}
function alterna_box () {
$(“#box”).toggle(“slow”);
}
function alterna_box_no_anim () {
$(“#box”).toggle();
}
</script></head>
<body>
<h1>Esempi Animazioni: effetti di base </h1>
<p> </p>
<ul>
<li><a href=”javascript:mostra_box();”>Mostra il box </a></li>
<li><a href=”javascript:nascondi_box();”>Nascondi il box con funzione di callback</a></li>
<li><a href=”javascript:alterna_box();”>Alterna fra mostra e nascondi box</a></li>
<li><a href=”javascript:alterna_box_no_anim();”>Alterna fra mostra e nascondi box senza animazioni</a></li>
</ul>
<p> </p>
<div id=”contenitore”>
<div id=”box”>Box con testo</div>
</div>
<p> </p>
<p> </p>
<h3>Codice:</h3>
<p> </p>
<pre>
function mostra_box () {
$(“#box”).show(“slow”);
}
function nascondi_box () {
$(“#box”).hide(“slow”,function () {
alert(“Animazione conclusa!”);
});
}
function alterna_box () {
$(“#box”).toggle(“slow”);
}
function alterna_box_no_anim () {
$(“#box”).toggle();
}
</pre>
</body></html>
Come potete vedere la pratica poi è piu’ semplice della teoria. Mentre un possibile esempio con i fade potrebbero essere i seguenti
<!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=iso-8859-1″ /><title>Guida jQuery – Animazioni 2</title>
<link rel=”stylesheet” href=”reset.css” type=”text/css” />
<link rel=”stylesheet” href=”base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<style type=”text/css”>
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;
}
</style>
<script type=”text/javascript”>
function test_slideToggle () {
$(“#box”).slideToggle(“slow”);
}
function test_fadeOut() {
$(“#box”).fadeOut(“slow”);
}
function test_fadeIn() {
$(“#box”).fadeIn(“slow”);
}
function test_fadeTo () {
$(“#box”).fadeTo(“slow”,0.5,function () {
alert(“Animazione conclusa!”);
});
}
</script></head>
<body>
<h1>Esempi Animazioni: effetti specifici </h1>
<p> </p>
<ul>
<li><a href=”javascript:test_slideToggle();”>Test .slideToggle() </a></li>
<li><a href=”javascript:test_fadeOut();”>Test .fadeOut() </a></li>
<li><a href=”javascript:test_fadeIn();”>Test fadeIn()</a></li>
<li><a href=”javascript:test_fadeTo();”>Test .fadeTo()</a></li>
</ul>
<p> </p>
<div id=”contenitore”>
<div id=”box”>Box con testo</div>
</div>
<p> </p>
<p> </p>
<h3>Codice:</h3>
<p> </p>
<pre>
function test_slideToggle () {
$(“#box”).slideToggle(“slow”);
}
function test_fadeOut() {
$(“#box”).fadeOut(“slow”);
}
function test_fadeIn() {
$(“#box”).fadeIn(“slow”);
}
function test_fadeTo () {
$(“#box”).fadeTo(“slow”,0.5,function () {
alert(“Animazione conclusa!”);
});
}
</pre>
</body></html>.
Mentre base.css per entrambi è
/**
* %%Specific Body Style
*/
body,html {
}
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin:40px;
}
/**
* %%Layout
*/
#container {
width: 60% ;
}
/**
* %%Typography
*/
table {
font-size: 1em;
}
/* standards redesign */
h1 {
font-size:26px;
font-weight:bold;
}
h2 {
font-size:20px;
}
h3 {
font-size:16px
}
p {
line-height:150%;
}
strong {
font-weight:bold;
}
del {
text-decoration: line-through;
color: #666;
}
cite, em, dfn {
font-style:italic;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
a abbr, a acronym {
border: none;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
}
abbr[title], acronym[title], dfn[title] {
cursor: help;
border-bottom: 1px dotted #ccc;
}
code, kbd, samp, pre, tt, var {
font-size: 92%;
font-family: monaco, “Lucida Console”, courier, monospace;
}
/* dimensions */
small, .small, sup, sub {
font-size:80%;
}
.big {
font-size:145%;
}
.thin {
font-weight: lighter;
}
/* colors */
.red {
color:#F00;
}
.orange {
color:#F60;
}
.blue {
color:#03F;
}
.green {
color:#0C0;
}
/* various styles */
.underline {
text-decoration:underline;
}
.debug {
outline:1px solid #F00;
}
.highlight {
background-color:#FF6; /* bright yellow */
padding:0px 2px;
}
.quiet {
color:#666;
}
.loud {
color:#000;
}
/* on demand structure */
fieldset {
border:1px solid #ccc;
width:95%;
padding:7px;
margin-top: 10px;
margin-bottom: 10px;
}
fieldset legend {
padding:0 3px;
font-weight:bold;
}
form input[type=’text’], form select, form textarea {
border:1px solid #ccc;
}
pre {
background: #EEE;
padding: 5px;
border: 1px solid #CCCCCC;
}
Mentre reset.css per entrambi è
/**
* CSS Reset Reloaded
*
* @author Eric Meyer
* @visit http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: #000;
background-color: #FFF;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border:none;
}
La novità forse piu’ interessante di Jquery è forse quella di permettere la creazione di animazioni personalizzate, sempre piu’ spesso si vede infatti per il Web questo tipo di Animazioni personalizzate. Ne facciamo un piccolo esempio anche noi utilizzando il metodo animate, una possibile sintassi potrebbe essere la seguente
$("nome selettore").animate({
"borderWidth" : "xpx", //bordo a x pixel
"width" : "+ypx" //aumenta la larghezza di ypixel
});
oppure potrebbe fare anche cose piu’ complicate come in questo esempio qui sotto dove a fine animazione lancia una finestra di popup che avvista che l’animazione stessa è stata completata.
| <!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=iso-8859-1″ /><title>Guida jQuery – Animazioni 3</title> | |
| <link rel=”stylesheet” href=”reset.css” type=”text/css” /> | |
| <link rel=”stylesheet” href=”base.css” type=”text/css” /> | |
| <script type=”text/javascript” src=”jquery-1.3.2.js“></script> | |
| <style type=”text/css”> | |
| ul { | |
| list-style-type: disc; | |
| padding: 10px; | |
| background-color:#FFFFFF; | |
| } | |
| ul li { | |
| margin-top: 3px; | |
| margin-bottom: 3px; | |
| line-height: 16px; | |
| } | |
| #box { | |
| width:100px; | |
| height:70px; | |
| background-color:#CCCCCC; | |
| border:1px solid #666666; | |
| } | |
| </style> | |
| <script type=”text/javascript”> | |
| function test_animate () { | |
| $(“#box”).animate({ | |
| “borderWidth” : “4px”, //bordo a 4 pixel | |
| “width” : “+=20px” //aumenta la larghezza di 20 pixel | |
| }, | |
| “slow”, //animazione lenta | |
| “linear”, //andamento lineare | |
| function () { | |
| //funzione di callback | |
| alert(“Animazione conclusa!”); | |
| } | |
| ); | |
| } | |
| </script></head> | |
| <body> | |
| <h1>Esempi Animazioni: effetti personalizzati </h1> | |
| <p> </p> | |
| <ul> | |
| <li><a href=”javascript:test_animate();“>Esegui l’animazione personalizzata</a> </li> | |
| </ul> | |
| <p> </p> | |
| <div id=”contenitore”> | |
| <div id=”box”>Box con testo</div> | |
| </div> | |
| <p> </p> | |
| <p> </p> | |
| <h3>Codice:</h3> | |
| <p> </p> | |
| <pre> |
</html>
</body>