Effets visuels standards

slideUp

(duration) Fait remonter les éléments de la liste sur l'écran en les

cachant progressivement par le bas, pendant la durée

duration (en millisecondes). Par défaut 400 ms.

slideDown

(duration) Fait descendre les éléments de la liste sur l'écran en les

affichant progressivement par le bas, pendant la durée

duration (en millisecondes). Par défaut 400 ms.

slideToggle

( duration ) Alterne slideUp () ou slideDown () sur chaque élément

de la liste selon que l'élément est visible ou caché.

fadeIn ( duration ) Fait apparaître les éléments de la liste en amenant

progressivement leur opacité à 1, pendant la durée

duration (en millisecondes). Par défaut 400 ms.

fadeOut ( duration ) Fait disparaître les éléments de la liste en amenant

progressivement leur opacité à 0, pendant la durée

duration (en millisecondes). Par défaut 400 ms.

fadeToggle

( duration ) Alterne fadeOut () ou fadeIn () sur chaque élément

de la liste selon que l'élément est visible ou caché.

show ( duration ) Fait apparaître les éléments de la liste progressivement,

pendant la durée duration (en millisecondes). Par

défaut 0 ms, provoquant un affichage instantané.

hide ( duration ) Fait disparaître les éléments de la liste progressivement,

pendant la durée duration (en millisecondes). Par

défaut 0 ms, les cachant instantanément.

toggle ( duration ) Alterne hide () ou show () sur chaque élément de la

liste selon que l'élément est visible ou caché.

Effets visuels personnalisés

On peut créer ses propres effets en utilisant la méthode animate (objStyle,

options) qui produit un effet sur les éléments de la liste.

animate

(objStyle,

options

) Produit un effet visuel personnalisé sur les éléments de la liste.

Le paramètre objStyle représente un objet contenant le nouveau style

des éléments à la fin de l'effet. Cet objet est de la forme ( prop1 :

valuel, prop2: value2, ...), chaque prop étant une propriété

CSS que l'on désire voir évoluer jusqu'à la valeur indiquée par value .

Le paramètre options représente un objet contenant les options de

l'effet, décrites ci-après.

Options de la méthode animate (objStyle, options)

duration Indique le nombre de millisecondes de l'effet. Une valeur de 0 amène l'élément

directement dans le nouveau style, sans progressivité.

complete Méthode complete () appelée pour chacun des éléments de la liste lorsque

l'effet est terminé sur celui-ci. La valeur this dans la fonction représente

l'élément DOM pour lequel l'effet est terminé.

step Méthode step () appelée pour chacun des éléments de la liste, après

chaque mise à jour des propriétés CSS du style de l'élément. Elle peut donc

être appelée plusieurs centaines de fois pour une même animation, à la

différence de options, complete appelée une seule fois (pour chaque

élément de la liste) à la fin de l'animation.

queue Par défaut, deux effets ne peuvent pas s'exécuter simultanément sur le même

élément, car le second effet est mis dans une file d'attente (il sero exécuté

lorsque l'effet précédent sur cet élément sera terminé). Si options queue

est positionnée à false, l'effet n'est pas mis dans la file d'attente et peut

donc s'exécuter immédiatement.