Allez encore plus loin avec le Framework jQuery en ajoutant des effets et des animations dans vos pages web.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter des effets des animations avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Dans les cours précédents avec jQuery vous avez appris à manipuler le DOM, le modifier, à manipuler le CSS, modifier les balises CSS des éléments du DOM, à accéder aux éléments du DOM. Le DOM c’est vos balises dans votre document HTML, les balises p, div, les images, les liens etc. Et jQuery sert aussi à effectuer des effets, dans le cours précédent je vous ai montré un petit effet d’une div qui se réduit grâce à la fonction toggle.
Afficher un élément
On va voir plus en détail ensemble, les effets jQuery, vous avez les méthodes show et hide, qui permet de faire apparaître et faire disparaître des éléments, show vous donnez une vitesse et vous pouvez faire un callback, appeler une fonction, pour afficher un élément, donc l’animation modifie dynamiquement la hauteur, la largeur et l’opacité de l’élément, vous avez le choix entre plusieurs vitesses, slow, normale et fast, ou vous pouvez renseigner une durée de l’effet en millisecondes.
Callback c’est une fonction optionnelle, c’est un paramètre optionnel, c’est une fonction de rappel que vous exécutez à la fin de l’effet, ça peut être très pratique,
P show ça veut dire que ça va afficher la balise p avec un effet très lent,
p.show slow function alert, ça va afficher votre balise paragraphe, et à la fin, une boîte de dialogue alerte va s’afficher avec le message fin.
Cette méthode renvoie un objet jQuery, ça peut être très pratique pour faire des effets sur les pages, les faire disparaitre au fur et à mesure, et à la fin vous faites un callback et ça appelle la page suivante pour l’afficher.
Cacher un élément
Vous avez hide, c’est le même principe que show avec une vitesse, une fonction callback de rappel, hide fast ça va cacher rapidement un paragraphe p, hide normal, ça va le cacher normalement et à la fin vous affichez une boite de dialogue alerte avec le message hello, cette méthode renvoie également un objet jQuery.
Je vous montre les exemples de code source, comme d’habitude, alors on a un paragraphe avec du texte diji, et qu’est-ce qu’on fait ?
On clique sur le paragraphe, Lire la suite, on va show, afficher le paragraphe, en fonction test, est ce qu’il est masqué ou affiché le paragraphe ?
Si il est masqué on l’affiche, on change le texte, si il est affiché on le masque et on change le texte avec return false, c’est sur le clic à suite, suite paragraphes, on récupère le deuxième paragraphe, et on masque le deuxième paragraphe au début, une fois que la page est chargée.
Si vous cliquez sur un élément de la liste, c’est une sorte d’arborescence créée directement avec jQuery, pouvez insérer des liens, là vous pouvez mettre des liens, vous avez des listes à puce imbriquées les unes dans les autres, et avec les ChildOn vous les masqués ou vous les affichés tout ça, il y a eu des cours précédents qui vous ont expliqué comment fonctionne ChildOn, qu’est-ce que ça donne ?
Lire la suite, on affiche le paragraphe, lire moins, on le masque grâce aux méthodes hide et show qui sont ici, tout simplement. Show et hide, lire moins, et donc là on va naviguer dans l’arborescence voilà, on navigue dans l’arborescence en cliquant sur les images et moins.
Votre plan d’actions !
Ca va vous permettre de commencer à vous amuser en faisant des effets d’apparition sur vos sites HTML 5, téléchargez le code source sous ce cours vidéo, si vous avez des questions posez-les directement sous la vidéo, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Et voici le code source commenté de l’exemple du cours.
Téléchargement du code source Exemple avec des effets jQuery
