Effetti jQuery | Spiegato

jQuery (se non hai già familiarità con esso) è una libreria JavaScript che contiene funzionalità comunemente usate di una pagina web avvolta in diverse funzioni. Fornendo così un'interfaccia per il risparmio temporale per lo sviluppatore web. JQuery fornisce anche un'interfaccia per il risparmio di tempo per creare animazioni ed effetti di transizione con quasi nessuna configurazione (la maggior parte delle funzioni prende 2 argomenti a Max). jQuery contiene vari tipi di funzioni tra cui selettori, eventi ed effetti. In questo post, discuteremo di vari tipi di effetti forniti da jQuery, la loro sintassi insieme al loro esempio

Impostazione HTML e incluso jQuery

Per iniziare a utilizzare jQuery nel tuo progetto, è necessario includerlo all'interno del tag script, stiamo utilizzando JQuery ospitato da Google con la seguente riga:

Dopo che questa riga è stata aggiunta al file HTML, possiamo iniziare a scrivere il codice jQuery

Il metodo animate ()

Il metodo animato offerto da jQuery viene utilizzato per creare animazione molto semplice ma attraente sulla tua pagina web. Questa funzione prende tre argomenti:

• Un parametro richiesto che è il animazione
• UN velocità (opzionale) Parametro che definisce la velocità dell'animazione
• UN richiamare(parametro opzionale) che come indica il nome è la funzione di callback

Sintassi del metodo animate ()

La sintassi è piuttosto diretta come già spiegato sopra

[jquerry_selector $ ()].animate (parametro, animation_speed, callback_function);

Per dimostrarlo, creeremo un pulsante e un div nel nostro file HTML usando le seguenti righe:

Ciao! Sono Linuxbot
Cliccami!

Questo ci darà il seguente risultato sul tuo browser:

Per il codice jQuery, gireremo l'opacità del div fino a 0.7 Ma lo faremo tra 2 secondi usando le seguenti righe di codice:

$ ("pulsante").Click (function ()
$ ("Div: Last").animare(

opacità: "0.5 ",
,
2000
);
);

Come puoi notare, abbiamo avvolto il animare metodo in a clic Metodo dell'evento in modo che la nostra animazione sia invocata solo quando facciamo clic sul pulsante. Dopo aver premuto il pulsante, otteniamo il seguente risultato:

Come puoi vedere, siamo stati in grado di animare l'opacità usando il metodo animate.

Il metodo Show () e Hide ()

Questi metodi vengono utilizzati per mostrare e nascondere elementi di una pagina web, la sintassi di entrambe queste funzioni è quasi identica come:

[jquerry_selector $ ()].show (animation_speed, callback_function);
[jquerry_selector $ ()].Hide (animation_speed, callback_function);

Per dimostrarlo, digita le seguenti righe nel nostro file HTML:

Posso scomparire e riapparire
Nascondere
Spettacolo

Vedrai la seguente pagina Web sul tuo browser Web:

Come puoi vedere, abbiamo un div con un po 'di testo al suo interno insieme a due pulsanti che li useranno nascondere E spettacolo rispettivamente animazioni.

Per la parte jQuery, utilizzare le seguenti righe di codice nel tuo file JavaScript:

$ ("#Show").Click (function ()
$ ("#demo").Show (2000);
);
$ ("#hide").Click (function ()
$ ("#demo").Hide (2000);
);

Avviso: Abbiamo superato il tempo come 2 secondi, altrimenti la modifica sarà istantanea e non avremo un'animazione come l'effetto.

Esegui il file e fai clic sul pulsante Nascondi e otterrai il seguente risultato:

Come puoi vedere, otteniamo un'animazione attraente, il passo successivo è testare l'animazione dello spettacolo facendo clic sul pulsante Show. Quindi, fai clic sul pulsante Show e otterrai i seguenti risultati:

Come puoi vedere, otteniamo un'animazione liscia di Unhide \ Show

Il metodo Slide ():

Possiamo anche ottenere una transizione di diapositiva liscia con la libreria jQuery. Otteniamo tre funzione per l'animazione delle diapositive, in particolare:

• scorrere verso l'alto()
• scorrere verso il basso()
• slidetoggle ()

Per dimostrare questo, implementeremo un metodo Slidetoggle (), usa le seguenti righe nel file HTML:

Posso scomparire e riapparire


Cliccami per attivare la diapositiva

Per il codice jQuery, utilizzare le seguenti righe nel file JavaScript:

$ ("#toggle").Click (function ()
$ ("#demo").slidetoggle ("lento");
);

Ottieni il seguente risultato sullo schermo:

Come puoi vedere, abbiamo una diapositiva rapida e liscia animazione usando jQuery. Oltre a questi, JQuery fornisce un sacco di altri metodi di animazione che puoi provare.

Conclusione

JQuery viene fornito con alcuni effetti interessanti e metodi di animazione che fanno davvero risaltare una pagina web. JQuery è focalizzato sulla creazione di vari metodi, selettori e animazione concisi per lo sviluppatore web. Ecco perché alcune delle animazioni più comunemente usate sono avvolte in diverse funzioni che possono essere invocate ogni volta che l'utente desidera. Oggi, in questo post, abbiamo esaminato come usare jQuery per implementare alcune animazioni \ Effetti sulla nostra pagina web.