Continuiamo la nostra guida al jQuery, vi avevamo lasciato poco tempo fa con questo articolo, ora analizzeremo le animazioni di base del jQuery, ideali come “trampolino” di lancio per lo sviluppo di funzioni più complesse.
Come prima cosa vorrei fare un ripassino generale:
1) Il DOM del jQuery inizia in questo modo:
$(document).ready(function() {
CODICE
}); //DOM
Da ora in poi il codice che vedrete dovrà essere inserito dentro questo “scheletro” .
2) Non dimenticate che gli script (non è una regola assoluta!) vanno inseriti dentro il tag html <head>
3) per i più inesperti, ricordate di racchiudere il dominio jQuery dentro i tag html <script> CODICE JQUERY </script>
Far apparire /scomparire un elemento con Jquery
Questa è una delle funzioni più elementari del linguaggio, si usano le funzioni show() e hide() per far apparire e scomparire un elemento ( che per comodità di trattazione da ora in poi sarà un div).
La teoria raccomanda l’uso di un trigger ( una sorta di pulsante), che se cliccato, fa eseguire una funzione, che nel nostro caso farà apparire il contenitore (div) grazie al comando show(). Ovviamente, il div da far apparire dovrà essere reso “invisibile” di default (ovvero al caricamento della pagina) grazie al comando css display:none;
Vediamo un esempio:
$(document).ready(function() {
$(".apri").click( //agisco sul trigger
function(){
$("#box").show(); //mostra il box
});
});
Come vedete, analizzando il codice, cliccando sul trigger (classe) “apri” si richiama la funzione che mostra il box precedentemente nascosto.
E’ possibile anche specificare una durata di animazione (attenzione, non si tratta di un’entrata in fading, bensì il div apparirà più lentamente). ecco un esempio di show() con durata:
$(document).ready(function() {
$(".apri").click(
function(){
$("#box").show("slow"); //il box apparirà più lentamente
});
});
Eliminiamo il contenitore appena apparso
Si usa, come avrete intuito, il comando hide(); Il procedimento e la sintassi sono identici al comando show(), pertanto per eliminare il div #box appena apparso ci basterà questo codice:
$(document).ready(function() {
$(".chiudi").click( //specifico un altro trigger
function(){
$("#box").hide(); //anche per hide vale la regola dello "slow"
});
});
Come vedete, ho usato un altro trigger chiamato “chiudi” per poter chiudere il box. Anche per hide potete specificare una tempistica (“slow”). dal punto di vista html il nostro codice apparirà così:
<p class="apri"></p> <p class="chiudi"></p> <div id="box">TUO TESTO QUI</div>
Ovviamente non dimenticate di specificare nel css:
#box{display:none;}
Benissimo a questo punto sapete come far apparire e scomparire un contenitore. Ovviamente potete impostare nel css anche la posizione, dimensione e colore del box e dei vari trigger. Ad esempio per posizionare un div in alto a destra della pagina seguite questa guida, e fate apparire e scomparire il contenitore usando quanto avete appreso e impostando i vari trigger. Questo può essere un buon modo per far apparire e scomparire la nostra pubblicità.
Effetto FadeIn e FadeOut con jQuery
Avete presente quell’effetto a comparsa “soft”, bhè quello viene chiamato fade. Potete vederlo all’opera qui.
Ovviamente l’effetto e’ molto più gradevole del semplice comando show(), ma in molti casi, sopratutto per evitare problema cross-browser (vedi IE8) il comando show() risulta il più adatto e consigliato. Questo proprio per aggirare i problemi di rendering del browser di casa Microsoft.
Ecco la struttura principale di fadeIn:
<script type="text/javascript">
$(document).ready(function() {
$(".apri").click(
function(){
$("#box").fadeIn("slow");
});
$(".chiudi").click(
function(){
$("#box").fadeOut("slow");
});
});//FINE DOM
</script>
Come potete osservare la sintassi è uguale a show e hide ed ho usato sempre i 2 trigger per far apparire e scomparire il box però stavolta l’effetto risulta molto più d’impatto.
Problemi e inconvenienti del codice trattato
Vi sarete accorti di un grosso inconveniente dovuto al fatto di dovere usare due trigger (pulsanti) per aprire e chiudere il nostro contenitore o di farlo apparire e scomparire con effetto fade. Esiste un modo per avere un solo trigger? La risposta è sì e ci viene in aiuto il comando toggle();
Toggle() ha un grosso vantaggio ci permette di ciclare, varie funzioni a ogni click del mouse. Possiamo far apparire o scomparire un box, oppure cambiare colore a un trigger ad ogni click del nostro mouse (quest’ultimo è l’esempio usato nella documentazione ufficiale). ecco un esempio:
<ul>
<li>W TARGETWEB</li>
</ul>
Ed ecco il nostro script:
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"}); //imposta stile e colore ad ogni click
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
Come vedete, ad ogni click del mouse si agisce sul toggle per far cambiare colore (e tipo di listato) al nostro piccolo menu. Col primo click il trigger diventerà blu, col secondo rosso, e con il terzo click ritornerà allo stato base senza colore.
E’ possibile sbizzarrirsi e creare tutte le nostre combinazioni, personalmente il toggle risulta un’ottima soluzione per eventi e news a scomparsa, in questi casi il titolo fungerà da trigger, mentre in un box nascosto scriverete la news da far apparire.
benissimo anche questa seconda parte della guida è conclusa, vi aspetto presto con la terza parte dove tratteremo:
– SlideUp e SlideDown
– temporizzare un’animazione
– Introduzione a jQuery UI
Se volete vedere la prima parte della guida cliccate QUI, se questo articolo vi e’ stato utile commentate mi raccomando!
SOMMARIO GUIDA
Parte 1: I primi passi con jQuery
Parte 2: Animazioni di base con jQuery
Parte 3: Guida pratica, overlay jQuery
Parte 4: Guida Pratica, Tooltip grafico
Parte 5: Evitare conflitti fra script jQuery
Parte 6: Uso di delay per temporizzare le immagini
bella guida complimenti =)
Giacomo riguardo al libro sul jQuery in italiano non ne conosco e non penso ce ne siano di ben fatti… in inglese invece se non sbaglio mi avevano detto che learning jquery era ottimo …
c’è un buon libro di alessandra salvaggio “programmare con jquery” anche in versione ebook
ne ho trovato uno ottimo della apogeo
Ciao,
megacomplimenti per i tutorial!
Pasticciando con queste funzioni associate a quelle toggle sono incappato in questo problema, magari sai darmi una risposta:
c’è un modo per far funzionare la funzione toggle su div diversi ma aventi la stessa classe?
Mi spiego meglio:
#box1{ width:450px; height:250px; background-color:#069; margin-left:20px;}
#box2{ width:450px; height:250px; background-color:#0FC; margin-left:20px;}
Lorem
Ipsum
box1
box2
box1b
$(“.lorem”).click(function () {
$(“#box1”).toggle(“slow”);
});
$(“.ipsum”).click(function () {
$(“#box2”).toggle(“slow”);
});
Il primo e l’ultimo div hanno la stessa classe ma il bottone “Lorem” fa sparire e comparire solo il primo box, nonostante abbiano la stessa classe. Come mai?
Grazie e complimenti ancora!
Grazie Nico!, sperò tornerai a trovarmi presto! riguardo al tuo problema:
Se non ho capito male è normale che se clicchi su lorem appaia solo il box 1 perchè hai associato solo quello alla classe.
Se vuoi fare aprire tutti i box cliccando ad esempio su lorem (se non ho capito male è questo che vuoi fare), dovresti procedere così:
$(“.lorem”).click(function () {
$(“#box1″).toggle(“slow”);
$(“#box2″).toggle(“slow”);
});
Ancora meglio così: (il delay lo spiego nella prossima parte della guida ;):
$(“.lorem”).click(function () {
$(“#box1″).toggle(“slow”).delay(500);
$(“#box2″).toggle(“slow”);
});
Con delay temporizzi l’apparizione del secondo box. 😉
Ciao!
Grazie per la repentina risposta!
In verità il mio problema era opposto ovvero che avevo 2 div con id box1 e volevo che clickando il bottone “lorem” sparissero entrambi..non so per quale motivo questo non accadeva ma sono riuscito a risolvere impostando i div invece che con id, con class e così funziona tutto…
Per comprendere con lo stesso bottone poi anche l’altro div ho risolto così:
$(“.lorem”).click(function () {
$(“.box1,.box2”).toggle(“slow”);
});
Grazie ancora di tutto,
a presto!
Ah ok avevo capito male xD non perderti la prossima “lezione” con il comando delay() che è davvero molto utile 😉
Ciao!
Sto usando il metodo toggle(“slow”) per visualizzare un box che contiene una mappa di google. il problema è che se imposto display:none del box mi carica la mappa di google solo in parte mentre vedo tranquillamente i tasti satellite ed il resto sulla parte non caricata, mentre se non imposto display, anche se vedo il box al caricamento della pagina, la mappa si vede per intero. Come posso risolvere?
Ciao Giovanni, ma quindi se imposti display:none al div contenente la mappa di google ti visualizza lo stesso qualcosa? Prova anche usando questa sintassi: #divcontenitoremappa > iframe {display:none;}
Grazie Riccardo per la risposta.
dici in questo modo? ovviamente nel file .css
#mappa{margin-left:400px; width:400px; height:400px; margin-top:20px; position:absolute;}
#mappa > iframe {display:none;}
la mappa si vede da subito, non appena apro la pagina; quindi la riga
#mappa > iframe {display:none;}
non viene rilevata.
Riguardo a ciò che vedo impostando display:none, il contenuto del div mappa viene caricato solo in parte, cioè carica solo un piccolo rettangolo contenente parte della cartina mentre carica normalmente i tasti funzione della mappa esempio i tasti che ti permette di passare dalla versione ‘mappa’ alla versione ‘satellite’ anche se questi si trovano nella posizione in cui non e stata caricata la mappa. Spero di essere stato chiaro. Saluti
p.s.: il sito lo sto testando sul mio pc e non online utilizzando xampp.
spero che tu sia guarito perfettamente!!
Ciao sono alle prima armi con jQuery e non ho capito perchè nell’ ultimo esempio non hai messo la riga di inizio DOM:
$(document).ready(function() {
Mi farebbe piacere capire il motivo.
Grazie.
Ciao Angelo, perchè sotto-intendevo che il codice era da applicare al precedente e quindi dentro il DOM di jQuery. Ad ogni modo è sicuramente da aprire e chiudere come hai giustamente indicato 😉
OK ti ringrazio per la risposta, ma ho un altro dubbio. Cioè in quel modo lo script parte ancor prima della pagina html? E se così fosse é possibile far partire lo script in un secondo momento?
Grazie.