Enchaîner les effets avec jQuery

393

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>

Articles connexes

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.