Dev'nsound

Pour finir avec esthétisme cette longue série de plugins jQuery, place au fondu. Dit "fade" en anglais, il est une des meilleures solutions pour créer un rollover (survol de la souris) de façon élégante et discrete. Personnellement, c’est quelque chose que j’utilise très souvent dans la réalisation de site internet. Il est présent dans beaucoup de sites et ce n’est pas par hasard si il est adopté si souvent… Voici quelques manières de l’employer.

InnerFade

InnerFade est le plugin par excellence pour réaliser un fondu n’importe quel élément. Les options disponibles sont nombreuses et les possibilités de contenus que l’on peut faire "fondre" sont nombreuses.

jQuery Fading Header

Cet article vous permettra de créer un header qui, lors du rollover, vous affichera une autre image. Vous pourrez utiliser cette technique pour l’utiliser sur une image simple et non une image en background css.

Spoiler Revealer

Ce plugin nous montre une parmi tant d’autres possibilités d’utilisation du fading. Il vous permettra de révéler du contenu de façon à cliquer sur un lien pour faire apparaître le contenu voulu. Un beau fadeIn sera utilisé pour réaliser cette fonction.

jQuery Spotlight

Ici, l’auteur utilise le fade pour mettre un bloc en avant en foncent le fond, de manière à séparer le bloc du reste du contenu. Ce plugin pourra par exemple être utilisé pour souligner un champ mal rempli ou non rempli lors d’une soumission d’un formulaire.

jQuery Fade

Ce petit plugin vous donnera la possibilité de changer la couleur d’un élément d’un bloc. Il est à la fois léger, simple et pratique.

jFade

Quant à jFade, tout comme à jQuery Fade, vous permettra de changer la couleur de n’importe quel zone, élément ou balise HTML, muni de différentes actions (rollover et clic). Une grande quantité d’options est disponible pour un maximum de possibilités.

La manière la plus simple et celle employée dans la plupart des cas de figure est d’utiliser ces attributs (où durée équivaut au temps d’exécution de l’effet (comme 500ms pour 0,5 secondes) et où valeur équivaut à la quantité d’opacité à faire apparaître variant de 0 à 1 (0.1, 0.2, 0.3…)) :

.fadeIn(durée, valeur);
.fadeOut(durée, valeur);
.fadeTo(durée, valeur);
.animation({"opacity": valeur}, durée)

J’espère que cette succession d’épisodes concernant les plugins jQuery vous aura plu. D’autres facettes de cette librairie javascript seront exposé ici, ne vous inquiétez pas.