Méthodes de glissement jQuery expliquées

Méthodes de glissement jQuery expliquées

Le phénomène coulissant vous permet de glisser ou de glisser les éléments DOM. Parfois, un panneau est joint avec des éléments qui fournissent des informations supplémentaires. Ces panneaux sont glissés vers le haut / vers le bas en fonction de l'exigence.

JQuery prend en charge trois méthodes de glissement qui sont slize (), slidedown () et slidetoggle (). Les méthodes SlizeUp () ou Slidedown () font glisser respectivement les éléments dans les directions ascendantes ou vers le bas. Alternativement, la méthode slidetoggle () détermine si l'élément se trouve à l'état de la glissade () ou dans le glissade (). Par exemple, si l'élément est à l'état de glissement (), alors slidetoggle () glissera l'élément vers le bas et vice versa.

Cet article démontre en détail les méthodes de glissement jQuery et sert les résultats d'apprentissage suivants.

  • fonctionnement des méthodes Sliseup (), Slidedown () et Slidetoggle ()
  • démonstration de méthodes de glissement jQuery en utilisant des exemples

Comment fonctionnent les méthodes coulissantes de jQuery

Cette section fournit le mécanisme de travail des méthodes de glissement jQuery en élaborant les syntaxes. De plus, un exemple est prévu qui fait référence à chaque méthode jQuery séparément. Explorons les méthodes de glissement jquery une par une.

Comment utiliser la méthode Slideup ()

Cette méthode glisse l'élément vers le haut à l'aide de jQuery Slideup ().

Syntaxe

$ (sélecteur).Slière (vitesse, rappel);

Dans la syntaxe ci-dessus,

  • le sélecteur peut être n'importe quel élément ou peut se référer au identifiant de classe d'un élément
  • le paramètre de vitesse décide à quelle vitesse / ralenti l'élément sera glissé et les valeurs de vitesse peut être lent, rapide ou millisecondes (valeur numérique)
  • le rappeler est facultatif et est utilisé pour obtenir une sortie après la fin du glissement

Exemple

Les lignes de code suivantes pratiquent la méthode jQuery Slideup ().

Le code est expliqué ici

  • le "coussin«La classe se réfère au panneau principal (sur lequel dépend le glissement)
  • le "seconde«La classe est utilisée pour le panneau secondaire (qui sera glissé)
  • La vitesse de glissement est réglée sur «rapide"

Sortir

Avant de glisser

Après avoir glissé dans la direction ascendante

Comment utiliser la méthode Slidedown ()

La méthode coulée () glisse l'élément dans la direction vers le bas.

Syntaxe

$ (sélecteur).Resté (vitesse, rappel);

Exemple

L'utilisation de la méthode jQuery Slidedown () est montrée en exerçant le code suivant.

Le code ci-dessus est décrit comme,

  • le ".principal«La classe de paragraphe est créée et elle est utilisée comme élément principal (utilisé pour glisser le panneau)
  • le ".seconde"Fait référence à un autre paragraphe qui sera glissé après avoir cliqué sur".principal»Paragraphe de classe
  • La vitesse de glissement est définie sur lent

Note: L'élément qui sera glissé doit avoir la propriété d'affichage définie sur aucun.

Sortir

Avant de glisser vers le bas

En cliquant, le paragraphe (classe = ”seconde«) Sera glissé comme indiqué ci-dessous.

Comment utiliser la méthode slidetoggle ()

Le slidetoggle () glisse sur l'élément si l'élément est à l'état de diapositive et si l'élément est à l'état de glissement, il ferait glisser l'élément dans une direction vers le bas.

Syntaxe

$ (sélecteur).Slidetoggle (vitesse, rappel);

Exemple

Pour pratiquer la méthode jQuery slidetoggle (), nous avons utilisé le code suivant.

Dans le code ci-dessus,

  • le "coussin«La classe représente l'élément principal (sur lequel dépend le glissement)
  • le "seconde"La classe fait référence à l'élément qui sera glissé vers le haut / bas
  • le vitesse coulissante se déroule en millisecondes (1000)

Sortir

Avant de glisser

Après avoir appliqué la méthode slidetoggle ()

Si vous continuez à cliquer sur l'élément principal, le curseur continuera de changer son état.

Conclusion

Pour glisser un élément dans une direction ascendante ou vers le bas, JQuery propose trois méthodes: Slidedown (), Slideup () et Slidetoggle (). Ce message descriptif fournit le travail ainsi que l'utilisation de chaque méthode de glissement. Les méthodes Slidedown () et Slize () sont exercées pour faire glisser l'élément dans les directions vers le bas et vers le haut. D'un autre côté, la méthode slidetoggle () modifie l'état actuel de l'élément de la glissade à la diapositive et vice versa.