Comment travailler avec l'assouplissement de pointe dans jQuery UI effets spéciaux en CSS3

De nombreuses applications nécessitent que vous afficher ou de masquer les éléments de CSS3 en différents points de l'exécution de l'application. Il peut être quelque chose d'aussi simple que de ne pas avoir besoin de l'élément à ce moment particulier (comme une barre de progression). Dans la plupart des cas, vous voulez tout simplement l'élément à disparaître. Que l'utilisateur remarque la disparition est indifférent à la fonctionnalité de l'application.

Cependant, vous voudrez peut-être à l'utilisateur de remarquer le changement dans certaines situations. Par exemple, un utilisateur peut sélectionner une option qui permet d'autres options inaccessible. L'utilisation d'un effet spécial pour faire de cette plus sensible peut être utile.

La bibliothèque jQuery UI fournit plusieurs moyens de contrôle de visibilité des éléments d'une manière animée. Le fait que l'élément est affiché ou masqué ne change pas, mais la façon dont l'application affiche ou masque qu'il fait.

Par exemple, vous pourriez utiliser un effet de diaporama pour montrer qu'un nouvel élément a été ajouté en raison d'un choix que l'utilisateur a fait. Il ya quatre principales méthodes d'éléments en utilisant cette technique l'animation:

• Utilisez un effet où l'élément change visuellement.

• Afficher un élément caché en utilisant un effet.

• Masquer un élément en utilisant un effet.

• 
  
  
  
  

  Basculer la visibilité d'un élément en utilisant un effet.

L'effet que vous choisissez de travailler avec un élément contrôle la façon dont jQuery UI gère visuellement. Par exemple, un effet d'exploser amène l'élément de briser en morceaux, chaque morceau se déplaçant dans une direction hors écran différent. Les mots-clés suivants définissent les sortes d'effets que vous pouvez utiliser (vous pouvez trouver des détails supplémentaires sur jQuery):

aveugle

rebond

agrafe

tomber

exploser

fondu

plier

culminant

bouffée

palpiter

échelle

secouer

taille

diapositive

transfert

En plus de l'effet réel, vous pouvez utiliser une fonction d'assouplissement pour rendre l'effet plus prononcé ou spéciale par d'autres moyens. Vous pouvez voir une liste des fonctions à l'assouplissement jQuery.

L'exemple suivant montre comment utiliser tous les quatre approches pour travailler avec l'élément visibilité. Il ya en fait quatre boutons utilisés pour l'exemple, mais l'élément visibilité vous limite à voir seulement trois à la fois parce que vous ne pouvez pas montrer un élément qui est déjà visible ou masquer un élément qui est déjà caché.

Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 dossier Animations de la Code téléchargeable comme Visibility.HTML.

$ (function () {// Gardez une trace de l'state.var caché de l'élément caché = false -.. $ ("# Effet") cliquez sur (function () {$ ("# sampleText") effet ("bounce", " easeOutBounce ", 1500) -}) - $ (" # Show ") cliquez sur (function () {Invisible = false -. $ (" # sampleText ") spectacle (." slide ", 1500, ChangeButtonState) -}) - $ ("#Hide") cliquez sur (function () {Invisible = true - $ ("# sampleText") cacher («exploser», 1500, ChangeButtonState) -.}) -.. $ ("# Toggle") cliquez sur (fonction () {= Invisible Invisible - $ ("# sampleText") basculer («échelle», {de pour cent: 0}, 1500, ChangeButtonState) -.}) - // Définir l'état du bouton que needed.function ChangeButtonState () { si (Caché) {$ ("# Show") attr (, false "caché") -.. $ ("# Hide") attr ("caché", true) -} else {$ ("# Show"). attr ("caché", true) - $ ("# Hide") attr ("caché", false) -.}}})

L'exemple commence par créer une variable, Caché, pour suivre l'état de l'élément. Lorsque l'élément est caché, le bouton Afficher est affiché. De même, lorsque l'élément est affiché, le bouton Masquer est affiché ainsi. Cette fonctionnalité est commandé par une fonction de rappel, ChangeButtonState ().

Le code pour le bouton Effet effectue tout simplement un effet sur l'élément, sampleText. Dans ce cas, vous voyez l'effet de rebond. La performance de cet effet est modifié par le easeOutBounce fonction d'accélération, et toute l'animation dure 1500 millisecondes.

La visibilité réelle est inchangée, mais l'utilisateur voit une animation de l'élément à l'écran. Vous pouvez utiliser cette technique pour souligner les champs qui ont des informations incorrectes ou nécessitent des informations supplémentaires. Bien sûr, vous pouvez également l'utiliser pour effectuer toute autre sorte de l'animation simple souhaitée - y compris une animation en boucle, où l'animation est constamment rejoué.

La afficher et masquer le bouton code de travail main dans la main pour masquer ou d'afficher sampleText. Le bouton Afficher utilise l'effet de glissement, et le bouton Masquer utilise l'effet d'exploser. Tant effectuer la tâche plus de 1500 millisecondes.

Notez que les deux gestionnaires d'événements de définir l'état de Hidden directement parce que l'État est un absolu fonction de la tâche que le bouton effectue. Les gestionnaires d'événements fournissent également ChangeButtonState () comme une fonction de rappel. L'animation appelle cette fonction après que l'animation a terminé de régler correctement l'état du bouton.

Le bouton à bascule fonctionne comme une combinaison de l'afficher et masquer les boutons - le gestionnaire d'événements permet de basculer simplement l'état visuel sampleText. Parce que l'État est pas connue, la valeur de Hidden est également activée. Dans ce cas, le gestionnaire d'événements appelle l'effet d'échelle, ce qui nécessite un argument supplémentaire en forme de pour cent.

Assurez-vous de vérifier les effets pour déterminer si elles nécessitent des arguments supplémentaires - la plupart le font pas. Lorsque l'animation est terminée, l'application appelle ChangeButtonState () pour reconfigurer l'interface utilisateur selon les besoins.