Implementazione di animazioni con jQuery

Gli effetti animati in jQuery Non sono le animazioni che conosciamo, cioè non daremo movimento a un disegno, è importante chiarirlo perché può creare confusione. Questi effetti animati si riferiscono al modo in cui vengono generate le transizioni degli elementi all'interno del SOLE, un elemento che può spostarsi lentamente da un angolo del browser o scomparire rompendosi in migliaia di pezzi.
A prima vista può sembrare che ci siano utili, alla fine se vogliamo che un elemento appaia o scompaia può non importarci come accade, invece per chi studia il comportamento del interfacce utente Questo è molto importante in quanto può creare l'umore dell'utente o essere visualizzato come un modo sottile per rendere l'aspetto visivo un po' più attraente.
C'è ovviamente chi abusa ed esagera nell'uso degli effetti animati e sovraccarica l'interfaccia tanto da renderla pesante o inaffidabile e far soffrire l'utente nell'utilizzo del sistema, ecco perché è necessario avere un minimo di coscienza e moderazione quando si applicano questi tipi di effetti.
È importante sapere che il diverso tipi di animazioni Hanno una serie di opzioni controllabili dalla chiamata che facciamo, possiamo controllarne la durata, in modo da poter calibrare se l'effetto influisce sull'usabilità o meno e se a seconda del tempo che dura può essere dettagliato e ottenere l'effetto desiderato e noi può anche indicare la funzione o il metodo da eseguire nel richiama alla fine dell'animazione, ad esempio se facciamo scomparire un pulsante quando non c'è più, viene eseguito un metodo che poi invia un messaggio all'utente.
Un'altra opzione che abbiamo è quella di passare a mappa degli oggetti in cui definiamo le opzioni avanzate o esclusive dell'effetto animato che stiamo utilizzando, tuttavia questo è soprattutto quando vogliamo fare qualcosa di molto specifico e avanzato. La sintassi per l'utilizzo di queste opzioni è la seguente:

 $ (selettore) .effetto (durata); $ (selettore) .effect (durata, funzione CallBack); $ (selettore) .effect (functionCallBack); $ (selettore) .effect (mapObjects); 

Poiché vediamo che ogni riga corrisponde a ciascuna delle possibili variazioni che possiamo applicare nelle animazioni standard, è possibile che alcune animazioni abbiano una caratteristica particolare, tuttavia in quelle che vedremo in questo tutorial lavoreremo con questo.
Uno degli effetti più usati e più utili a cui possiamo pensare è mostrare e nascondere elementi e si scopre anche che sono effetti abbastanza semplici da implementare, ecco perché li useremo come esempio.
mostra () e nascondi ()I metodi che ci permettono di raggiungere questi obiettivi sono Mostrare() sì nascondere (), come vediamo i loro nomi in inglese corrispondono all'azione, mostra per il primo e nascondi per il secondo, questi possono essere applicati a qualsiasi elemento all'interno del nostro SOLE, quindi sono abbastanza pratici e utili.
Faremo una piccola animazione in cui utilizzeremo la durata e la chiamata a una funzione richiama al momento dell'esecuzione, applicheremo gli effetti Mostrare() sì nascondere () e così possiamo imparare come vengono utilizzati.
Nel codice seguente vediamo come in primo luogo ciò che facciamo è includere la libreria jQuery da uno dei CDN adeguato, con questo evitiamo di doverlo memorizzare localmente e quindi sfrutteremo la cache del browser.
Quindi definiamo due blocchi di nome articolo1 sì elemento2 rispettivamente, dove il primo è nascosto e il secondo visibile e infine abbiamo un pulsante che dice start a cui applichiamo nel suo evento click che esegue la funzione incoraggiare().
La funzione incoraggiare() prima applica l'animazione Mostrare() al articolo1 e gli dà un valore di 1000 millisecondi che è uguale a 1 secondo e a questo aggiungiamo a richiama dove applichiamo l'effetto nascondere () nostro elemento2 e genera un messaggio per console.
Dentro l'animazione nascondere () a cosa ci applichiamo elemento2 abbiamo creato un richiama dove scriveremo anche un messaggio da console. Quindi diamo un'occhiata al codice per il nostro primo esempio:

 Animazioni
Questo è il nostro elemento nascosto iniziale

Per eseguire l'animazione, fare clic sul pulsante
Cominciare 

Vediamo ora come appare nel nostro browser, nella prossima immagine vedremo il HTML Prima di eseguire qualsiasi azione, diamo un'occhiata a come il articolo1 non mostrato:

Ora nell'immagine seguente vedremo cosa succede dopo aver cliccato sul pulsante Cominciare, noteremo che ora vediamo l'elemento nascosto e nella console avremo due messaggi, se fanno l'esempio dal vivo vedranno anche come appare prima un elemento e un secondo dopo scompare l'altro:

In modo semplice abbiamo dato vita a mostrare e nascondere gli elementi all'interno del nostro documento HTML.
Ci sono momenti in cui vogliamo che un pulsante funzioni come un interruttore, mostrando e nascondendo un elemento o un gruppo di elementi, anche se questo è facile da fare valutando gli stati e usando i metodi Mostrare() sì nascondere (), la verità è che genereremmo troppo codice per qualcosa di così semplice, ecco perché il team di jQuery ci hanno pensato e ci forniscono il metodo alterna ().
Cosa fa il metodo toggle()?Ciò che fa questo metodo è valutare lo stato corrente dell'elemento e quindi se è visibile lo nasconde e se è nascosto lo mostra, come indicato dal comportamento di tipo switch. La cosa migliore è che a questo metodo possiamo aggiungere le diverse opzioni di animazione, con la durata e la possibilità di fare il richiama.
Costruiamo ora un esempio in cui mettiamo in pratica quanto appreso sul metodo toggle(), vediamo il codice di seguito:

 Animazioni
Il risultato dell'esecuzione dell'effetto toggle().

Cominciare 

Nel codice seguente vedremo come abbiamo creato un div chiamato articolo1 che inizialmente è nascosto, quindi abbiamo un pulsante Cominciare che quando si fa clic chiamerà la funzione di animazione, avrà il metodo alterna () applicato all'elemento e in prima istanza apparirà e visualizzerà un messaggio per console.
Vediamo lo stato iniziale di questo codice per browser, noteremo che abbiamo solo il pulsante e non c'è nulla nella console:

Ora vediamo come quando si fa clic sul pulsante appare l'elemento nascosto e riflette il messaggio per noi attraverso la console:

Infine, se clicchiamo nuovamente sul pulsante, l'elemento verrà nascosto e il messaggio verrà ripetuto nella console, che notiamo quando vediamo il numero tre accanto ad essa, che indica quante volte l'evento è stato attivato.

sì ok Mostrare() sì nascondere () Sono efficaci, a prima vista possono sembrare un po' semplici, ecco perché abbiamo altri metodi che ci aiutano a realizzare animazioni diverse, in questo caso stiamo parlando di dissolvenza sì diapositiva che corrispondono a dissolvenza e scorrimento, dove il primo ha l'effetto di apparire e il secondo scivola da un bordo dello schermo o dal contenitore dell'elemento.
Vediamo nella lista seguente i suoi equivalenti a Mostrare() e per nascondere ():
fadeIn() e slideIn()Corrispondono agli effetti per mostrare gli elementi, cioè sono equivalenti al Mostrare().
fadeOut e slideOut ()Corrispondono agli effetti per nascondere gli elementi, cioè sono equivalenti al nascondere ().
fadeToggle() e slideToggle()C'è un terzo caso ed è quello che corrisponde agli effetti di tipo switch e sono equivalenti a alterna ().
Come esercizio, ti lasciamo ripetere gli esempi ma utilizzando questi nuovi metodi in modo che tu possa vedere in prima persona come funzionano.
Con questo finiamo questo tutorial, abbiamo imparato ad animare i nostri elementi in modo sottile e intelligente, è importante non abusare di questi effetti nel modo di posizionare tempi di animazione molto lunghi, poiché ciò che otterremo è infastidire l'utente e ritardare il loro lavoro, ricordando che dobbiamo mantenere l'usabilità prima di ogni altra cosa.