Metodi di scorrimento jQuery spiegati
Il fenomeno scorrevole consente di scivolare verso l'alto o scivolare verso il basso gli elementi DOM. A volte, un pannello è allegato con elementi che forniscono ulteriori informazioni. Questi pannelli sono scivolati su/giù a seconda del requisito.
JQuery supporta tre metodi scorrevoli che sono slideup (), slidedOwn () e slidetoggle (). I metodi SlideUp () o SlidedOwn () fanno scorrere rispettivamente gli elementi in direzioni verso l'alto o verso il basso. In alternativa, il metodo Slidetoggle () determina se l'elemento è nello stato SlideUp () o in SlidedOwn (). Ad esempio, se l'elemento è nello stato slideup (), quindi slidetoggle () farà scorrere l'elemento verso il basso e viceversa.
Questo articolo dimostra in dettaglio i metodi di scorrimento jQuery e serve i seguenti risultati di apprendimento.
- Funzionamento dei metodi SlideUp (), SlidedOwn () e Slidetoggle ()
- Dimostrazione di metodi di scorrimento jQuery usando esempi
Come funzionano i metodi di scorrimento jQuery
Questa sezione fornisce il meccanismo di lavoro dei metodi di scorrimento jQuery elaborando le sintassi. Inoltre, viene fornito un esempio che si riferisce a ciascun metodo jQuery separatamente. Esploriamo i metodi di scorrimento jQuery uno per uno.
Come utilizzare il metodo SlideUp ()
Questo metodo fa scorrere l'elemento verso l'alto usando jQuery slideUp ().
Sintassi
$ (selettore).diapositiva (velocità, callback);Nella sintassi sopra,
- IL selettore può essere qualsiasi elemento o può fare riferimento a ID della classe di un elemento
- IL parametro di velocità decide quanto velocemente/rallenta l'elemento verrà scivolato e i valori di velocità può essere lento, veloce o millisecondi (valore numerico)
- IL richiamare è facoltativo e viene utilizzato per ottenere un po 'di output dopo il completamento dello scorrimento
Esempio
Le seguenti righe di codice praticano il metodo jQuery slideup ().
Il codice è spiegato qui
- IL "prim"La classe si riferisce al pannello principale (da cui dipende dallo scorrimento)
- IL "sec"La classe viene utilizzata per il pannello secondario (che verrà fatto scivolare)
- La velocità scorrevole è impostata su "veloce"
Produzione
Prima di scivolare
Dopo aver scivolato in direzione verso l'alto
Come utilizzare il metodo SlidedOwn ()
Il metodo SlidedOwn () fa scorrere l'elemento nella direzione verso il basso.
Sintassi
$ (selettore).Slidedtown (velocità, callback);Esempio
L'uso del metodo jQuery slidedown () è mostrato esercitando il seguente codice.
Il codice sopra è descritto come,
- IL ".principale"La classe di paragrafo viene creata e viene utilizzata come elemento primario (utilizzato per scivolare giù il pannello)
- IL ".sec"Si riferisce a un altro paragrafo che verrà scivolato dopo aver fatto clic su".principale"Classe paragrafo
- La velocità di scorrimento è impostata su lento
Nota: L'elemento che verrà fatto scivolare deve avere la proprietà del display impostata su nessuno.
Produzione
Prima di scivolare giù
Dopo aver fatto clic, il paragrafo (class = "sec“) Sarà scivolato giù come mostrato di seguito.
Come utilizzare il metodo slidetoggle ()
Lo slidetoggle () fa scorrere l'elemento se l'elemento si trova in uno stato di scorrimento e se l'elemento è in uno stato di scorrimento, farà scorrere l'elemento in una direzione verso il basso.
Sintassi
$ (selettore).slidetoggle (velocità, callback);Esempio
Per praticare il metodo jQuery slidetoggle (), abbiamo utilizzato il seguente codice.
Nel codice sopra,
- IL "prim"La classe rappresenta l'elemento primario (da cui dipende lo scorrimento)
- IL "sec"La classe si riferisce all'elemento che verrà scivolato su/giù
- IL velocità di scorrimento è impostato in millisecondi (1000)
Produzione
Prima di scivolare
Dopo aver applicato il metodo slidetoggle ()
Se continui a fare clic sull'elemento primario, il cursore continuerà a modificare il suo stato.
Conclusione
Per far scorrere un elemento in direzione verso l'alto o verso il basso, JQuery offre tre metodi: SlidedOwn (), SlideUp () e Slidetoggle (). Questo post descrittivo fornisce il funzionamento e l'uso di ciascun metodo scorrevole. I metodi SlidedOwn () e SlideUp () sono esercitati per far scorrere rispettivamente l'elemento in direzioni verso il basso e verso l'alto. D'altra parte, il metodo slidetoggle () modifica lo stato corrente dell'elemento dallo slide-up a slide-down e viceversa.