Le Framework jQuery jQuery UI propose les mêmes animations que jQuery : fadeIn, fadeOut, fadeTo, fadeToggle, hide, show, slideDown, slideToggle, slideUp, toggle.
jQuery UI apporte des animations spécifiques encore plus élaborées : blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer.
Et vous pouvez aussi créer vos propres animations !
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Découvrez la puissance des animations du Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours, déjà il y a eu beaucoup, plusieurs cours sur jQUery UI, vous avez vu les boites de dialogues, les barres de progression, les champs numériques, les boutons, vous avez vu énormément de chose, les listes de suggestions, là vous allez apprendre à utiliser les animations jQuery, je vous ai préparé des exemples de code source où vous avez toutes les animations qui sont listées, comment les utiliser, comme ça vous pourrez les implémenter dans votre site Internet.
Les animations
Il faut savoir que jQuery de base propose plusieurs animations, mais le framework jQuery UI a rajouté des animations encore plus complètes, donc vous avez fadeIn, fadeOut, fadeTo, fadeToggle, hide, show, slideDown, slideToggle, slideUp et toggle. Vous pouvez également créer vos propres animations avec la méthode jQuery animate, elle a plusieurs propriétés, des propriétés CSS, vous pouvez jouer sur les largeurs et hauteurs etc. d’un élément, vous spécifiez la durée en millisecondes, le type d’easing … on va le voir après les animations easing … et la fonction callback qui sera appelée lorsque l’animation sera terminée, vous avez un petit exemple pour comment créer votre propre animation.
Et donc jQuery UI a rajouté des animations supplémentaires comme blind, bounce, clip, drop, explode, fade, fold, hightlight, puff, pulsate, scale, snake, size, slide, transfer à la fin de ce cours, je vais vous montrer tous ces effets, il suffit d’utiliser la nouvelle méthode effect pour appliquer ces animations, effect prend en paramètres le nom de l’animation, les options spécifiques à l’animation et à l’easing, une durée en millisecondes, et vous pouvez appeler une fonction callBack, à la fin de l’animation, de l’effet, cette fonction sera appelée automatiquement. Un exemple de code source, pour savoir comment ça fonctionne ? Comment vous allez pouvoir le réutiliser ?
La plus part des effets … je vous ai listé tous les effets pour savoir un peu ce qu’ils font … la plupart des effets possèdent deux ou trois des options suivantes, le mode en show sur l’apparition du widget, ou sur la disparition du widget, la direction horizontale ou verticale, la distance couverte par l’élément, et times le nombre de rebond quand un effet easing.
Je vous ai listé toutes les animations possibles, blind, bounce, clip, tout est expliqué en français, il suffira de mettre la vidéo en pause, de relire le PowerPoint, ça n’a pas beaucoup d’intérêt pour vous, vous savez lire, il y a un exemple d’utilisation à chaque fois, je préfère vous montrer le code source donc les animations, mettez sur pause pour savoir ce que ça donne, moi je vais vous montrer à travers le code source directement, visuellement ce que donne chaque animation.
Exemple d’effets
Je pense que ça va vous aider beaucoup plus, ce sera beaucoup plus parlant. Là il y a des boutons pour créer les effets, les utiliser, slideOut sur le clic du bouton, fadeIn sur le clic du bouton, on le fait sur l’image, regardez il y a une image ici, id sur l’image directement, on applique l’effet avec un 500 millisecondes, 350 millisecondes et là on fait une explosion en 1000 secondes, et là vous avez tous les effets jQUery sur le bouton là, c’est l’effet jQuery et on fait un run effect, je vais vous montrer à quoi ressemble tous les effets jQuery, ici.
J’ai repris ce code sur le site de jQuery, je voulais vous montrer absolument tous les effets en direct voilà. Explosion de l’image, affichage de l’image, masquage de l’image, affichage de l’image, explosion de l’image. Ça c’est des effets basiques. Là, l’effet blind, vous avez l’effet bounce, l’effet drop, l’effet clip, ce code source vous pourrez le reprendre, ça va vous permettre de de tester et les effets avant de les utiliser, tout simplement, fade, là, c’est la disparition, fold, hightlight, ça joue sur les couleurs, pardon j’étais sur fold, hightlight ça joue sur les couleur, vous pouvez les définir, puff, il y a des effets très sympas, d’autres un peu moins bien, là ça va le réduire, on peut le relancer, shake ça va le secouer, en fonction du site Internet que vous allez utiliser, vous prendrez l’effet que vous préférez. Le size, le slide, voilà, le transfert voilà, tous les effets explosion, c’est mon préféré, donc le code est relativement court pour appliquer un effet, voilà, sur un clic.
Votre plan d’actions !
Vous pouvez donner beaucoup d’interactions, les animations, les internautes aiment bien les petites animations discrètes pour faire apparaître les éléments, une page, le transfert d’un fichier tout ça, pensez à utiliser des animations jQuery UI, vous avez vu c’est relativement simple à utiliser. Si vous avez des questions posez-les directement sur ce cours, sur Développement Facile sous cette vidéo, vous allez retrouver le code source complet en téléchargement commenté comme ça se sera plus simple pour visualiser tous les effets pour vous, et les réutiliser dans vos sites Internet. Je vous invite à consulter la deuxième vidéo pour aller plus loin avec les frameworks jQuery, Dojo, jQuery UI, là il y a une image vidéo 2 ou en dessous de cette vidéo pour aller plus loin et je vous accompagne personnellement pour réussir votre développement avec ces frameworks jQuery, plug-in jQuery UI et le framework Dojo, en attendant, je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple animation jQuery UI
Et voici le code source pour tester les animations du framework jQuery UI.
Téléchargement du code source Exemple d'animations jQuery UI
