Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CREER DES EFFETS DE FONDU OU DE SLIDE EN JQUERY

Les effets de fondu en jQuery

Le jQuery va nous permettre de créer des effets de fondu, c’est-à-dire de faire disparaître ou apparaître progressivement un élément HTML, en le faisant passer de totalement transparent à totalement opaque ou inversement sur une certaine durée.

Le jQuery dispose de quatre méthodes pour créer des effets de fondu :

  • La méthode fadeIn() ;
  • La méthode fadeOut() ;
  • La méthode fadeTo() ;
  • La méthode fadeToggle().

Les méthodes fadeOut() et fadeIn(), tout d’abord, vont respectivement nous permettre de faire disparaître ou de faire apparaître progressivement des éléments HTML.

Une nouvelle fois, on va pouvoir utiliser ces méthodes sans argument ou en précisant une durée pour l’animation ainsi qu’une fonction de rappel en arguments.

Utilisation des méthodes jQuery fadeOut() et fadeIn()

Essayer ce code

La méthode fadeToggle() va elle nous permettre de faire apparaitre progressivement un élément caché ou de faire disparaitre progressivement un élément affiché.

Reprenons notre exemple précédent en utilisant cette méthode :

Utilisation de la méthode jQuery fadetoggle()

Essayer ce code

La méthode fadeTo(), finalement, va nous permettre d’ajuster le niveau d’opacité d’un élément ciblé.

Le niveau d’opacité devra être précisé en argument et sera compris entre 0 (totalement transparent) et 1 (totalement opaque).

L’élément ciblé va donc s’opacifier ou devenir progressivement transparent jusqu’à atteindre le niveau désiré.

Utilisation de la méthode jQuery fadeTo()

Essayer ce code

Les effets de slide en jQuery

Le jQuery va également nous permettre de créer des effets de slide qui vont pouvoir être utilisés conjointement avec des menus déroulants par exemple.

Pour cela, nous allons pouvoir choisir parmi trois méthodes :

  • La méthode slideUp() ;
  • La méthode slideDown() ;
  • La méthode slideToggle().

Les méthodes slideUp() et slideDown() vont respectivement nous permettre de cacher et d’afficher un élément HTML avec un effet de slide.

Ces méthodes vont une nouvelle fois pouvoir être utilisées sans argument ou en précisant une durée pour l’effet et une fonction de rappel.

Utilisation des méthode slideUp() et slideDown()

Essayer ce code

N’hésitez pas à essayer le code ci-dessus; vous devriez être capable de le comprendre sans problème !

La méthode slideToggle() va nous permettre de cacher un élément affiché ou d’afficher ou élément caché avec un effet de slide.

Cette méthode va pouvoir prendre les mêmes types d'arguments que les précédentes.

Utilisation de la méthode jQuery slideToggle()

Essayer ce code

Chapitre précédent

Chapitre suivant