Démo jQuery
1. slideToggle (click me)
S'affiche au clic sur "slideToggle". Si je reclique dessus, cela va disparaître... magie !
Les variantes de "slide" sont "slideDown" et "slideUp", sans effet au reclic comme sur le "slideToggle"
Les variantes de "slide" sont "slideDown" et "slideUp", sans effet au reclic comme sur le "slideToggle"
2. hide
Si je clique sur "hide", la box en-dessous va disparaître.
Variante : "show"
Variante : "show"
3. fadeIn
Si je clique sur "fadeIn", la box va apparaître avec un effet de fondu.
Variante : "fadeOut"
Variante : "fadeOut"
4. animate
Si je clique sur "animate", la box va bouger en fonction de l'animation prévue. Ici, un déplacement à 10px sur la droite, en position absolute).
La seconde animation est celle d'ajouter une opacité de 0.1 au bloc.
5. toggleClass
Ajoute une classe au clic et l'enlève au reclic (ici, la classe s'appelle "changecolor").
Variante : "addClass" (ajoute une classe) et "removeClass" (supprime une classe)
Variante : "addClass" (ajoute une classe) et "removeClass" (supprime une classe)
S'amuser un peu plus ?
Rendez-vous sur W3School !Plus d'effets d'animation ?
Testez jQuery UI !Plugins et scripts "clé en main"
Il existe une quantité de plugins développés en jQuery prêts à l'emploi. Que ce soit pour créer des galeries, des lignes du temps, des chargements de page...Où les trouver ? Requête : "awesome jQuery plugins" :-)
Sinon il y en a ici et aussi ici
Il y a en a déjà toute une sélection dans ma boîte à outil