Comment employer des transitions de classe avec jQuery UI effets spéciaux en CSS3

Utilisation des classes de CSS3 peut avoir un effet intéressant sur la présentation des informations à l'écran. jQuery UI permet d'utiliser des classes CSS pour réaliser des animations de quatre manières différentes:

• Ajout d'une classe

• Retrait d'une classe

• Commutation entre les classes

• Basculer une classe

Dans les quatre cas, l'effet ne se produit pas immédiatement - Vous fournissez un retard de temps pour faire la transition entre les présentations ralentir assez pour l'utilisateur de voir. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 dossier Animations de la Code téléchargeable comme ManageClasses.HTML).

$ (function () {$ ("# ChangeClass") cliquez sur (function () {$ ("# sampleText") addClass ("Effet", 1500, removeClass) -Retour fausse -..}) - fonction removeClass () { $ ("# sampleText") removeClass ("Effet", 1500, "easeOutBounce") -.} -.. $ ("# SwitchClass") cliquez sur (function () {$ (". Normal") switchClass ("Normal" , "Effet", 1500, "easeInElastic") -. $ (". Effet") switchClass ("Effet", "Effect2", 1500, "easeOutElastic") -. $ (". Effect2") switchClass ("Effect2" , "Normal", 1500, "easeInOutElastic") - return false -}) -. ". Normal". $ ("# ToggleClass") cliquez sur (function () {$ () toggleClass ("Effet", 1500) -Retour faussement})})

Il ya trois boutons sur le devant de la page: Ajout / Suppression de classe, basculer entre les classes, et de basculer entre les classes. Chacun de ces boutons est affecté un gestionnaire d'événements, comme illustré. La fonction removeClass () est une fonction de rappel pour le bouton Ajouter / Supprimer des classes. Après la transition pour le gestionnaire d'événement est terminé, le code appelle automatiquement cette fonction.

Toutes ces animations fonctionnent exactement de la même façon - ils ajouter ou supprimer des classes ou à partir de l'élément spécifié. Dans ce cas, un

La méthode addClass () effectue une simple addition d'une classe. Vous fournissez le nom de la classe à ajouter que le premier argument. Si la classe existe déjà pour l'élément, rien ne se passe. De même, le procédé removeClass () supprime la classe spécifiée de l'élément. Encore une fois, vous fournissez le nom de la classe à supprimer comme premier argument.

La méthode switchClass () commute entre une classe et une autre. Vous pouvez l'utiliser pour créer plusieurs transitions. Par exemple, cet exemple montre comment basculer entre trois transitions. La classe normale est remplacé avec effet, l'effet est remplacé par Effect2 et Effect2 est remplacé par normal.

Par conséquent, vous voyez les animations tournent entre trois classes. Vous fournissez le nom de la classe à supprimer comme premier argument et le nom de la classe d'ajouter que le second argument.

Procédé toggleClass () ajoute ou supprime une classe en fonction de si la classe est affectée à l'élément. Dans ce cas, le code ajoute effet lorsque sampleText manque et supprime effet lorsque sampleText l'a appliqué. Vous fournissez le nom de la classe à basculer comme premier argument.

jQuery UI ne peut pas animer tous les styles. Par exemple, il ya une transition entre avoir le texte justifié à gauche et ayant centré dans cet exemple. Cette transition ne peut être animé. Ce que vous voyez est ce que l'effet se produit à la fin de l'animation.

En outre, certains effets sont animés, mais ils ne sont pas animées dans la façon dont vous pourriez vous attendre. Par exemple, si un élément change de couleur, la nouvelle couleur est utilisé tout au long de l'animation, mais vous le voyez progressivement disparaître dans.

Chacun de ces appels de méthodes comporte une temporisation de 1500 millisecondes. Cette valeur indique la quantité de temps pendant laquelle se produit l'animation. Le réglage par défaut est de 400 millisecondes, ce qui est un peu difficile pour la plupart des gens à voir. Cependant, cet argument est optionnel, et vous ne pas avoir à fournir pour faire le travail de la méthode.

La méthode addClass () comprend un autre argument optionnel, une fonction de rappel. La fonction de rappel est appelée lorsque l'animation est terminée. L'exemple utilise la fonction de rappel pour activer l'effet. Cependant, un rappel peut être utilisé pour un quelconque d'un certain nombre de fins. Par exemple, vous pouvez l'utiliser pour créer une séquence de validation afin de garantir que les utilisateurs saisissent les données correctes pour les champs de formulaire qui ont des informations incorrectes.

Une animation peut également utiliser un fonction d'accélération. Cette fonction détermine la façon dont l'animation apparaît à l'écran. Le réglage par défaut est d'utiliser la fonction swing assouplissement, qui fournit une transition douce entre le point le point final de départ que la plupart des utilisateurs apprécieront (l'animation commence un petit peu lent, devient un peu plus rapide et plus linéaire dans le milieu, et puis finit un peu lent).

Cependant, vous voudrez peut-être un peu plus de piquant ou du moins un effet différent. Vous pouvez voir une liste des fonctions à l'assouplissement jQuery. Cet exemple utilise un certain nombre de différentes fonctions d'assouplissement de sorte que vous aurez une idée de la façon dont ils travaillent.