Enchaîner les effets avec jQuery

JavaScript publié le 19 Jan 2020 mis à jour le 24 Nov 2023 Guillaume

La plupart des effets jQuery sont exécutés en parallèle et vous aurez parfois besoin de les exécuter l'un après l'autre, dans un ordre séquentiel.

En simultané

Pour illustrer mon propos, je crée un code qui fait apparaître 2 titres avec l'effet fadeIn(). Dans cet exemple banal, les balises <h1> et <h2> vont apparaître simultanément :

<!doctype html>
<html>

<head>
    <title>Bonjour</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <style>
        h1,
        h2 {
            display: none;
        }
    </style>
</head>

<body>
    <h1>Bonjour</h1>
    <h2>Vous allez bien ?</h2>
    <script>
        $(function() {

            $("h1").fadeIn(1000);
            $("h2").fadeIn(1000);

        });
    </script>
</body>

</html>

L'un après l'autre avec la fonction de rappel

Si je souhaite faire apparaître la balise <h2> suite à l'apparition de la balise <h1>, je peux procéder comme ceci :

<!doctype html>
<html>

<head>
    <title>Bonjour</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <style>
        h1,
        h2 {
            display: none;
        }
    </style>
</head>

<body>
    <h1>Bonjour</h1>
    <h2>Vous allez bien ?</h2>
    <script>
        $(function() {

            $("h1").fadeIn(1000, function() {
                $("h2").fadeIn(1000);
            });

        });
    </script>
</body>

</html>

Voici une séquence avec 3 titres :

<!doctype html>
<html>

<head>

    <title>Bonjour</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <style>
        h1,
        h2,
        h3 {
            display: none;
        }

    </style>
</head>

<body>
    <h1>Bonjour</h1>
    <h2>Vous allez bien ?</h2>
    <h3>Oui, merci.</h3>
    <script>
        $(function() {

            $("h1").fadeIn(1000, function() {
                $("h2").fadeIn(1000, function() {
                    $("h3").fadeIn(1000);
                });
            });
        });

    </script>
</body>

</html>

Boucle d'une séquence

Si je souhaite boucler la séquence, ça se complique. D'abord, j'ajoute une séquence qui fait disparaître les titres après leurs apparitions successives avec fadeOut() :

<!doctype html>
<html>

<head>

    <title>Bonjour</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <style>
        h1,
        h2,
        h3 {
            display: none;
        }

    </style>
</head>

<body>
    <h1>Bonjour</h1>
    <h2>Vous allez bien ?</h2>
    <h3>Oui, merci.</h3>
    <script>
        $(function() {
            $("h1").fadeIn(1000, function() {
                $("h2").fadeIn(1000, function() {
                    $("h3").fadeIn(1000, function() {
                        $("h1, h2, h3").fadeOut(1000);
                    });
                });
            });
        });
    </script>
</body>

</html>

Puis je mets la séquence dans une fonction qui sera appelée toutes les 4 secondes grâce à la méthode setInterval() :

<!doctype html>
<html>

<head>

    <title>Bonjour</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <style>
        h1,
        h2,
        h3 {
            display: none;
        }

    </style>
</head>

<body>
    <h1>Bonjour</h1>
    <h2>Vous allez bien ?</h2>
    <h3>Oui, merci.</h3>
    <script>
        $(function() {
            function titre() {
                $("h1").fadeIn(1000, function() {
                    $("h2").fadeIn(1000, function() {
                        $("h3").fadeIn(1000, function() {
                            $("h1, h2, h3").fadeOut(1000);
                        });
                    });
                });
            }
            setInterval(titre, 4000);
        });

    </script>
</body>

</html>