jQuery e animazioni
jQuery e animazioni
jQuery e animazioni è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 1 lezioni in totale.
Introduzione
Salve,
In questa sezione impareremo a creare animazioni con jQuery.
Cominciamo.
metodi show e hide
metodi show() e hide()
Possiamo mostrare e nascondere un oggetto DOM sullo schermo con i metodi show e hide.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>metodo toggle
metodo toggle()
Inoltre, esiste il metodo toggle(), il cui funzionamento si può intuire dal nome. Con questo metodo, se l'elemento è nascosto, viene mostrato. Se è visibile, viene nascosto.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadein e fadeout
metodi fadeIn() e fadeOut()
Ora vediamo i metodi fadeIn e fadeOut, che mostrano e nascondono gli elementi HTML con un'animazione.
I metodi fadeIn e fadeOut accettano facoltativamente un valore numerico in millisecondi. Il valore determina la durata dell'animazione in millisecondi. Se non passiamo alcun argomento, viene utilizzato il valore predefinito.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein e fadeout
fadeOut riduce l'opacità degli elementi per un determinato periodo di tempo. Quando l'opacità raggiunge 0, la proprietà display diventa none.
È la versione del metodo hide() che abbiamo studiato in precedenza, con il supporto dell'animazione dell'opacità.
FadeIn è l'opposto del metodo fadeOut.
metodo fadeToggle
metodo fadeToggle()
Il metodo fadeToggle() è simile al metodo toggle(). Se l'elemento è nascosto, lo mostra. Se è visibile, lo nasconde e, come si può immaginare, esegue questa operazione con un'animazione.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>Animazione CSS
Animazioni CSS
Le animazioni in jQuery vengono eseguite dal metodo animate(). Questo metodo accetta un argomento JSON, al cui interno definiamo quali proprietà CSS dell'elemento di destinazione devono cambiare.
Il secondo parametro è la durata dell'animazione in millisecondi (è un parametro facoltativo)
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Gestore degli eventi dell'animazione
Gestore degli eventi dell'animazione
L'ultimo argomento che possiamo assegnare al metodo animate è il gestore degli eventi che possiamo eseguire al termine dell'animazione.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>animazione relativa
Parliamo anche di una piccola comodità relativa alle animazioni.
Alle proprietà da utilizzare nelle animazioni possono essere assegnati valori relativi invece di valori assoluti.
L'esempio seguente rende il concetto più chiaro.
Durante l'animazione, alla proprietà top dell'elemento di destinazione interessato sono stati aggiunti 100px.
$("button").animate({
top: "+=100px",
});interrompere l'animazione
Interruzione dell'animazione
Per interrompere un'animazione in esecuzione, è sufficiente selezionare l'elemento di destinazione a cui è associata l'animazione e utilizzare il metodo stop().
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Predefinito
Predefinito
Così come possiamo creare animazioni definendo proprietà CSS personalizzate con jQuery, possiamo anche utilizzare metodi predefiniti di jQuery.
Esaminiamo il codice seguente.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");durata relativa dell'animazione
Come per gli altri metodi di animazione, se desideriamo assegnare la durata dell'animazione con questo metodo, dobbiamo passarla come primo argomento.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");gestore degli eventi
L'ultima cosa che Le dirò sull'animazione slide. Mmm, credo di averla dimenticata.
Proprio come nel metodo animate (per definire un gestore degli eventi da eseguire al completamento dell'animazione), possiamo definire la funzione anonima come secondo argomento dei metodi precedenti.
setTimeout(function() {
//Call when animation is completed
}, 1000);Congratulazioni
Congratulazioni 🎉
Abbiamo imparato jQuery e le animazioni.
Nella prossima sezione impareremo le operazioni AJAX.
Domande Frequenti
La lezione «jQuery e animazioni» è gratuita?
Sì — il testo completo di «jQuery e animazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 1 lezioni in totale.
Cosa imparerò in «jQuery e animazioni»?
jQuery e animazioni Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «jQuery e animazioni»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.