Vuoi imparare jQuery ma non sai da dove iniziare? Le animazioni personalizzate
Nella scorsa lezione abbiamo dato un’occhiata veloce alle principali animazioni predefinite presenti in jQuery. Ma come fare ad applicare delle animazioni personalizzate? Oggi scoprirai come fare: iniziamo!
La funzione “.animate()”
Oltre a tutti metodi di animazione già visti, jQuery fornisce la funzione .animate() che ci permette di progettare le nostre animazioni. Questa funzione prende in ingresso quattro paramentri:
- Un array con le proprietà e i rispettivi valori (simili a quello utilizzato per la funzione
css. Obbligatorio - Una stringa (slow,normal,fast) oppure il numero di millisecondi rappresentanti la durata dell’animazione. Opzionale
- Una stringa che descrive come deve essere svolta l’animazione (detta anche easing type). Opzionale
- Una funzione, da eseguire al termine dell’animazione. Opzionale
La sintassi è dunque la seguente:
$("elemento_selezionato")
.animate( { proprietà1:valore, proprietà2:valore}, durata, easing, funzione_da_richiamare_al_termine);
Per il momento ignorerò gli ultimi due parametri, e mi concentrerò solo sui primi due, dato che sono più che sufficienti per le prime animazioni.
Come utilizzarla?
L’utilizzo della funzione animate è identico a quello della funzione css, con la differenza che in questo caso l’elemento passerà da un valore all’altro gradualmente, senza un brusco salto. Facciamo un esempio dunque. Prendiamo questo markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animate!</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="esempio.js" type="text/javascript"></script>
<style type="text/css">
#box{
width:50px;
height:50px;
background-color:#00F;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Vogliamo aumentare le dimensioni dell’elemento #box. Potremmo farlo con la funzione css in questo modo:
$(document).ready(function() {
$("#box").css({height: "400px", width: "400px"});
});
Come puoi vedere, non si riesce nemmeno a notare che c’è un passaggio da un div 50×50 ad uno 400×400. Proviamo allora con la funzione animate:
$(document).ready(function() {
$("#box").animate({height: "400px", width: "400px"},"slow");
});
Così va molto meglio! Con questa funzione possiamo animare qualsiasi proprietà CSS che abbia un valore numerico, quindi margini, padding, bordi, altezza, larghezza, posizioni, opacità sono tutti candidati ideali. L’animazione avrà come punto iniziale quello specificato nel foglio di stile, e come punto finale quello specificato nel file JavaScript.
Nell’animazione precedente abbiamo visto come animare contemporaneamente due proprietà: infatti il nostro “box” cresceva allo stesso modo sia in altezza che il larghezza. Possiamo animare una proprietà (o gruppi di proprietà) per volta concatenando più chiamate alla funzione animate:
$(document).ready(function() {
$("#box")
.animate({height: "400px"},"slow")
.animate({width: "400px"},3000)
.animate({opacity: 0.2},1500);
});
Posso utilizzare solo valori numerici?
No. Per le proprietà height, width e opacity oltre a valori numerici, è possibile specificare anche dei valori testuali:
- show: aumenta gradualmente la proprietà, se è già al massimo non fa nulla
- hide: stessa cosa di show, però diminuisce il valore fino ad azzerarlo. Se è già zero non fa nulla
- toggle: alterna show e hide. Se la proprietà è visibile, la nasconde, altrimenti la mostra
Grazie a quest’ultima proprietà possiamo realizzare animazioni ancora più complesse con meno righe di codice, che tengono conto del contesto. Prendiamo ad esempio questo markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Esempio - Continua a leggere...</title>
<link rel="stylesheet" href="more.css" type="text/css" media="screen">
<script src="../jquery.js" type="text/javascript"></script>
<script src="more.js" type="text/javascript"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus nisl, ullamcorper a interdum ullamcorper, suscipit at lacus. Nunc egestas varius leo, ac egestas augue bibendum non. Duis ligula purus, pulvinar eu porttitor fermentum, ultricies a ipsum.</p>
<a id="more" href="#">Mostra/Nascondi</a>
<p>Questo paragrafo dovrebbe essere nascosto quando la pagina viene caricata. Dovrebbe essere mostrato solo quando viene cliccato il link appena sopra.</p>
</body>
</html>
Possiamo nascondere e mostrare il secondo paragrafo semplicemente, con la funzione animate:
$(document).ready(function() {
$("p:eq(1)").hide();
$("a#more").click(function(){
$("p:eq(1)").animate({opacity:'toggle'},"slow");
return false;
});
});
Ottenendo questo risultato. Ti avverto che questa non è una soluzione ottimale, dato che nel caso JavaScript fosse disattivato, non sarebbe possibile mostrare il paragrafo.
Quando si utilizza la funzione animate, però, bisogna stare attenti a non andar contro le regole dei CSS. Prendiamo come esempio questo semplice labirinto. L’HTML è una semplice immagine e un div. Il CSS associato è il seguente:
#omino {
background-color:#00F;
height:15px;
left:0px;
position:absolute;
top:250px;
width:15px;
}
Il codice che effettua l’animazione è invece il seguente:
$(document).ready(function() {
$("#risolvi").click(function(){
$("#omino")
.css({top: 250,left:0})
.animate({left:'+=60px'},'slow')
.animate({top:'+=40px'},'slow')
.animate({left:'+=115px'},'slow')
.animate({top:'+=78px'},'slow')
.animate({left:'+=300px'},'slow');
});
});
Come puoi vedere, ho utilizzato la funzione animate per modificare le proprietà top e left, ma questo non avrebbe prodotto alcun movimento, se nel CSS non avessi posizionato assolutamente il div. È importante dunque pianificare con attenzione le animazioni.
Un’altra cosa che puoi notare nel codice JavaScript precedente, è l’utilizzo dell’operatore +=. Questo operatore permette di aggiungere una quantità relativa: invece di muovere l’elemento alla posizione “60px”, la muove di 60px rispetto a quella attuale.
Conclusioni
Abbiamo fatto un sacco di strada fino ad ora. Siamo partiti dai concetti base di jQuery, passando per la gestione degli eventi, le animazioni e, quest’oggi, le animazioni personalizzate. Questi concetti dovrebbero bastarti per cominciare a creare le tue prime funzioni utilizzando questo fantastico framework. Nelle prossime lezioni vedrai come questi concetti vengono applicati nel “mondo reale”: ti mostrerò infatti alcuni esempi di codice jQuery funzionanti al 100%.
L'autore
15 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Come al aolito sei stato molto chiaro e ho capito benissimo, grazie mille!
PS: Troppo bello il labirinto >.>
Bellissimi articoli, gli sto seguendo con attenzione e devo dire che questo framework mi appassiona… e non poso :-P
Grazie!
@Famba @enrii Grazie per i complimenti. Devo dire che scoprire le capacità di jQuery giorno dopo giorno sorprende anche me :)
@Famba
Infatti! Mi sono divertito un mondo a farlo :D
Just, ti consegniamo ufficialmente un oscar per la genialità degli esempi relativi agli articoli delle tue guide.
dopo la lampadina, ormai divenuta un cult, adesso è la volta del labirinto.
Mi avete fatto prendere un bello spavento ieri…
ciao e complimenti pe rl’ottima guida. Vorrei chiederti uan cosa:
é possibile mettere un if? cioè:
Se hai il javascript disabilitato, allora visualizza questo(che sarebbe un div con tutti gli elementi nascosti)
se è possibile potresti inserire un esempio?
spero che questa mia domanda sia utile anche ad altre persone
grazie
Ciao @GrAfIcAnDo,
quello che vuoi realizzare si può ottenere in più modi.
Per mostrare un messaggio o una porzione di html in caso di JavaScript disabilitato si può utilizzare il tag noscript.
Funziona così: tutto quello che inserisci all’interno del tag viene mostrato solo se JavaScript non è disponibile, ad esempio:
<noscript>
Devi abilitare javascript!
</noscript>
Questa soluzione però è usabile solo nel caso in cui sia necessario mostrare il contenuto alternativo in poche pagine.
Un intero sito che debba mostrare altri contenuti in caso di JavaScript non disponibile prevede invece un’attenta progettazione fin dall’inizio.
Cercherò di scrivere qualcosa al riguardo al più presto :)
un ultima cosa se nella stessa pagina ho piu testi da nascondere con link diversi?
cioè in pratica sono delle faq se il cliente clicca su una domanda si apre la risposta mi sono spiegato spero di si :-)
grazie per la risposta alla prima domanda, per quanto riguard ala seconda domanda?
Ciao ragazzi… interessanti questa guida!!!! mi sto approcciando a jquery e al momento vorrei scrivere una funzione che permetta ad una stringa di testo di cambiare colore. I colori vorrei sceglierli io.
$(document).ready(function() {
$(“#text”)
.animate({color: “#fff555″},”slow”)
.animate({color: “#c5c5c5”},3000)
.animate({color: “#333333”},1500);
});
è corretta??? Grazie
Veramente bello il vostro sito!!
Complimenti a Giustino Borzacchiello, la sua guida JQuery l’ho trovata molto chiara e comprensibile anche per me che sono un grafico (??) della carta stampata che da qualche tempo sta tentando cercando di imparare a progettare nel web.
Vi segurò spesso.
Grazieeee
Ciao Francesco,
grazie a te e benvenuto su YIW :)
Complimenti, sei davvero di una chiarezza e semplicità nello spiegare che anche uno
completamente alle primissime armi riesce a capire.
Grazie di esistere!!
Ciao,
la guida è molto carina e sopratutto molto chiara.
Grazie mille!
E davvero complimenti!
Giovi
Salve,
sono un laureato in informatica che ha letto con molto piacere questo breve tutorial su jquery. Non ho mai utilizzato questo framework e non conoscevo minimamente i costrutti in esso contenuti, ti posso solo ringraziare perché in 5 minuti ho capito i concetti base che ruotano intorno ad esso e mi hai evitato di sbraitare altrove.
Articolo scritto con intelligenza, chiaro e alla portata di tutti! grazie