Introduzione agli effetti jQuery
jQuery è una delle librerie javascript più popolari progettata per semplificare il DOM HTML, ovvero le proprietà del modello a oggetti del documento come la manipolazione e l'attraversamento degli alberi. Altre proprietà come la gestione degli eventi, l'animazione Ajax e CSS sono anche semplificate. È una libreria open source e gratuita che viene generalmente utilizzata nel 73% dei 10 milioni di siti Web utilizzati oggi. Le caratteristiche principali di jQuery includono selettori basati su elementi DOM, manipolazione e attraversamento che rendono il lavoro su jQuery molto più semplice e conveniente. In questo argomento, impareremo a conoscere gli effetti jQuery.
Viene utilizzato per fornire un'interfaccia dall'aspetto molto semplice per realizzare vari tipi di effetti sorprendenti. Questi metodi consentono di utilizzare e applicare rapidamente le funzionalità e gli effetti più comunemente utilizzati, nonché configurazioni dal minimo al minimo. Il comando per mostrare e nascondere gli elementi è praticamente lo stesso di quello che chiunque vorrebbe vederli si aspetterebbe. Il comando Show () viene utilizzato per mostrare gli elementi in un set completamente avvolto e il comando hide () viene utilizzato per nasconderli.
Diversi metodi di effetto jQuery:
Qui discutiamo alcuni diversi tipi di metodi di effetto jQuery
1) Animate ()
Il metodo animate viene utilizzato per eseguire un'animazione basata personalizzata per un set di proprietà CSS. Questo metodo viene utilizzato per modificare lo stato dell'elemento da uno stato a un altro insieme agli stili CSS. Il valore della proprietà viene modificato gradualmente in modo tale da poter ottenere un effetto animato. La cosa da notare è che solo i valori numerici possono essere animati come il margine: 40px. D'altra parte, i valori per le stringhe non possono essere animati come colore di sfondo: verde. Questo di nuovo ha un'eccezione per stringhe come lo show, hide e toggle.
Sintassi
(selector).animate((styles), duration, easing, callback)
Esempio
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Ritardo ()
Come suggerisce il nome, questo viene usato per impostare il ritardo per tutte le funzioni che sono in coda sugli elementi selezionati.
Sintassi
$(selector).delay(duration, NameOfQueue)
Esempio
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Questa funzione viene utilizzata per alternare tra le funzioni di dissolvenza in entrata e in uscita su diverse caselle. Se un elemento svanisce, questa funzione fadeToggle () può essere utilizzata per dissolverli. Gli elementi che si trovano nella forma nascosta non verranno visualizzati come parte di questo metodo.
Sintassi
$(selector).fadeToggle(duration, easing, callback)
Esempio
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Questo metodo viene utilizzato per modificare l'opacità di tutti
cioè gli elementi relativi al paragrafo gradualmente. L'opacità specificata in questo contesto si riferisce all'opacità dell'effetto mutevole.
Sintassi
$(selector).fadeTo(duration, opacity, easing, callback)
Esempio
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Questo metodo è lo stesso suggerito dal nome. Questo è usato per cancellare la coda e rimuove tutti gli elementi dalla coda che non sono stati eseguiti. La funzione completerà l'esecuzione una volta avviata l'esecuzione. Questo è legato a due metodi, vale a dire. queue () e dequeue ().
Sintassi
$(selector).clearQueue(NameOfQueue)
Esempio
$("label").click(func()(
$("box").clearQueue();
));
6) finish ()
Questo metodo in jQuery viene utilizzato per terminare o terminare l'animatore in esecuzione poiché viene utilizzato per arrestare tutte le animazioni attualmente in esecuzione e viene utilizzato per rimuovere tutte le animazioni in coda. Viene anche utilizzato per completare tutte le animazioni per una vasta gamma di elementi selezionati. Questo metodo è simile a metodi come .stop che ha entrambi i parametri reali. La principale differenza tra questo metodo e finish è che il metodo finish viene utilizzato per arrestare e mettere in pausa i tipi di proprietà dell'elemento CSS di tutte le animazioni in coda.
Sintassi
$(selector).finish(NameOfQueue)
Esempio
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Questo metodo viene utilizzato per rimuovere la funzione successiva dalla coda e viene quindi utilizzato per eseguire la funzione. Una coda è una o più funzioni che si trovano nella pipeline in attesa di essere eseguite. Questo metodo di dequeue viene utilizzato insieme al metodo di coda. Un elemento può avere più code. La coda FX è la coda più comune che è anche la coda predefinita.
Sintassi
$(selector).dequeue(NameOfQueue)
Esempio
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Questo è un altro metodo utile in jQuery che viene usato per scorrere verso il basso o mostrare gli elenchi di elementi selezionati. Il punto da notare qui è che funziona anche sugli elementi che sono in formato nascosto e il tipo di visualizzazione è mostrato come nessuno nel caso dei CSS ma la visibilità non dovrà essere nascosta.
Sintassi
$(selector). slideDown (duration, easing, callback)
Esempio
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Il metodo slideUp () è usato per nascondere tutto
elementi selezionati. Gli elementi che si trovano nella forma nascosta non verranno visualizzati affatto. Ciò, pertanto, non influisce sul layout della pagina.
Sintassi
$(selector).slideUp(duration, easing, callback)
Esempio
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Contrariamente al metodo slideUp () questo metodo è usato per mostrare tutto il nascosto
elementi. Questo metodo slidedown () funziona su tutti gli elementi che sono anche correlati ai metodi nascosti nel caso dei metodi jQuery e il nome viene visualizzato anche nel CSS ma la visibilità non è nascosta.
Sintassi
$(selector).slideDown(duration, easing, callback)
Esempio
$("label").queue(func()(
$("p").slideDown();
));
11) Attiva ()
Questo metodo viene utilizzato per alternare tra show e hide di vari
elementi basati. Questo metodo viene utilizzato per verificare la visibilità degli elementi. Il metodo show () viene utilizzato per essere eseguito anche quando l'elemento è nascosto. Hide () viene eseguito anche quando l'elemento è visibile. Entrambi i metodi show e hide in combinazione creano un effetto di commutazione e quindi il metodo toggle ().
Sintassi
$(selector).toggle(duration, easing, callback)
Esempio
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Questo metodo viene utilizzato per alternare tra le funzioni slideUp () e slideDown () per tutti gli elementi basati sul paragrafo. Questo metodo viene utilizzato per verificare gli elementi selezionati per la visibilità. SlideDown () è la funzione che può essere vista in esecuzione quando l'elemento è nascosto. Al contrario, l'elemento slideUp () è quello che dovrebbe essere eseguito se l'elemento è visibile.
Sintassi
$(selector).slideToggle(duration, easing, callback)
Esempio
$("label").queue(func()(
$("p").slideToggle();
));
jQuery ci consente di aggiungere gli effetti sulla pagina Web fornendo numerose quantità di funzioni che possono essere inserite su selettori diversi. Sta a te decidere come rendere i tuoi siti Web più pieni di effetti. Spero ti sia piaciuto il nostro articolo. Resta sintonizzato sul nostro blog per altri articoli come questi.
Articoli consigliati
Questa è una guida agli effetti jQuery. Qui abbiamo discusso i diversi tipi di metodi di effetti jQuery con sintassi ed esempio. Puoi anche leggere il seguente articolo per saperne di più -
- Usi di JQuery
- Alternative jQuery
- Comandi query MySQL
- Che cos'è la procedura in SQL?
- jQuery querySelector