Créer des effets de fondu ou de slide

20 min Niveau 8

Dans ce nouveau cours, nous examinerons les méthodes fournies par jQuery pour créer des effets de fondu et de slide.

Créer des effets de fondu

« Fondu » fait référence à la disparition progressive ou à l'apparition d'un élément. C'est donc l'effet de la transition d'un état à un autre. jQuery nous offre quatre façons de créer des effets de fondu :

La méthode fadeOut()
La méthode fadeIn()
La méthode fadeTo()
La méthode fadeToggle()

Ces méthodes utilisent en fait la valeur de l'attribut opacity de l'élément cible et augmenteront progressivement cette valeur de 1 à 0 (totalement opaque à totalement transparent), et vice versa. Une fois que l'opacité atteint 0, display: none; est appliqué pour le faire disparaître complètement de la page.

Plus précisément, la méthode fadeOut() permet de masquer l'élément cible en rendant l'élément cible progressivement transparent, tandis que la méthode fadeIn() aura l'effet inverse, qui est de montrer progressivement l'élément caché.

La méthode fadeToggle() permet d'inverser la visibilité des éléments en faisant apparaître progressivement des éléments initialement cachés, ou à l'inverse, en faisant progressivement disparaître les éléments initialement opaques avec un effet de fondu.

Enfin, la méthode fadeTo() permet de définir le niveau de seuil d'opacité (entre 0 et 1) que l'élément doit atteindre progressivement. Si l'élément est initialement plus transparent que ce niveau, il deviendra progressivement trouble et vice versa.

Il est possible de passer jusqu'à trois paramètres aux méthodes fadeOut(), fadeIn() et fadeToggle() : la durée de la transition, la fonction d'accélération qui doit être utilisée pour effectuer la transition, et la fonction de rappel à exécuter une fois la conversion terminée. En ajoutant le niveau d'opacité comme deuxième paramètre, la méthode fadeTo() prendra en charge jusqu'à 4 paramètres.

Concernant la durée de la transition, nous pourrons spécifier le nombre de millisecondes que l'effet doit durer, ou utiliser les mots clés slow ou fast.

En ce qui concerne la fonction d'accélération qui doit être utilisée pour obtenir l'effet, jQuery ne prend en charge que le swing et le linéaire par défaut, ce qui crée une transition en douceur.

<body>
    <h1>Titre principal</h1>
    <button id="button1">fadeOut()</button>
    <button id="button2">fadeIn()</button>
    <button id="button3">fadeToggle()</button>
    <button id="button4">fadeTo()</button>
</body>

$(document).ready(function(){
    $("#button1").click(function () {
        //Disparition du titre en 400ms
        $("h1").fadeOut();
    });

    $("#button2").click(function () {
        //Apparition du titre en 2 secondes
        $("h1").fadeIn(2000);
    });

    $("#button3").click(function () {
        //Inversion de l'état de visibilité de h1 avec un effet de fondu
        //Apparition du titre en 2 secondes 
        $("h1").fadeToggle(2000);
    });

    $("#button4").click(function () {
        //Fondu jusqu'à un certain niveau d'opacité, 0.3
        $("h1").fadeTo(2000, 0.3);
    });
});

Créer des effets de slide en jQuery

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !