jQuery / Faire apparaître les éléments dans l’ordre
.delay(index * gap).fadeIn(duration) décale les départs. Si la durée dépasse l’intervalle, les effets se chevauchent. Pour attendre la fin complète, lancez l’élément suivant depuis le rappel d’achèvement précédent.
Intervalle de départ et ordre de fin
.delay() attend dans la file de chaque élément, pas une file commune de la collection. Une même attente démarre ensemble ; index crée le décalage. JavaScript entier n’est pas bloqué.
Intervalle 200ms, .fadeIn() 400ms : Beta peut commencer avant la fin d’Alpha. En série, elle attend cette fin puis 200ms. Ce sont des objectifs de programmation, pas des horaires exacts garantis.
.each() suit la collection, ici Alpha, Beta, Gamma directement sous #items. Tri particulier et ordre CSS peuvent différer de la lecture visuelle ; choisissez l’ordre pertinent.
Exemple complet de comparaison
Enregistrez en UTF-8 appearance-demo.html et ouvrez-le. Internet charge la version complète officielle 4.0.0. Les effets temporisés nécessitent effects, pas Slim. Aucun serveur ou paquet n’est nécessaire. Ordre, restauration et répétition ont été vérifiés dans Edge sous Windows avec 3.7.1 et 4.0.0.
Le HTML est visible avant que le script prêt le masque. Un échec de chargement ne cache donc pas définitivement le contenu par CSS. La sortie suit l’initialisation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Staggered versus strictly sequential appearance</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
button, select { font: inherit; margin: 4px; }
.item { border: 2px solid teal; padding: 12px; margin: 12px 0; background: #e7f5f1; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<label>Mode <select id="mode"><option value="stagger">Staggered starts</option><option value="serial">Wait for completion</option></select></label>
<button type="button" id="start">Start</button>
<button type="button" id="reset">Reset</button>
<div id="items"><div class="item" id="alpha">Alpha</div><div class="item" id="beta">Beta</div><div class="item" id="gamma">Gamma</div></div>
<pre id="result" aria-live="polite"></pre>
<pre id="events"></pre>
<script>
jQuery(function ($) {
const $items = $("#items > .item"), gap = 200, duration = 400;
let generation = 0, busy = false, state = "ready", completed = [], events = [];
function report() {
$("#result").text(`mode=${$("#mode").val()}\nstate=${state}\nvisible=${$items.filter(":visible").length}/${$items.length}\ncompleted=${completed.join(",") || "(none)"}`);
$("#events").text(events.join("\n") || "(none)");
}
function reset() {
generation++; // Invalidate callbacks before settling old effects.
$items.stop(true, true).hide();
busy = false; state = "ready"; completed = []; events = [];
$("#start").prop("disabled", false); report();
}
function start() {
if (busy) return;
reset(); busy = true; state = "running"; $("#start").prop("disabled", true);
const run = generation, mode = $("#mode").val();
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) {
$items.show(); completed = $items.map(function () { return this.id; }).get();
events = ["Reduced motion: shown immediately"];
busy = false; state = "done"; $("#start").prop("disabled", false); report(); return;
}
function reveal(index, wait) {
const $item = $items.eq(index), id = $item[0].id;
$item.delay(wait).queue(function (next) {
if (run !== generation) return;
events.push("start " + id); next(); report();
}).fadeIn(duration, function () {
if (run !== generation) return;
completed.push(id); events.push("done " + id);
if (completed.length === $items.length) {
busy = false; state = "done"; $("#start").prop("disabled", false);
} else if (mode === "serial") reveal(index + 1, gap);
report();
});
}
if (!$items.length) { busy = false; state = "done"; $("#start").prop("disabled", false); report(); return; }
if (mode === "stagger") $items.each(function (index) { reveal(index, index * gap); });
else reveal(0, 0);
report();
}
$("#start").on("click", start);
$("#reset").on("click", reset);
$("#mode").on("change", reset);
reset();
});
</script>
</body>
</html>Au départ, zéro élément visible et aucun terminé.
mode=stagger
state=ready
visible=0/3
completed=(none)- Start avec Staggered starts : start beta peut précéder done alpha.
- Fin : state=done, visible=3/3, completed=alpha,beta,gamma. Start redevient disponible.
- Wait for completion réinitialise. Ensuite start alpha → done alpha → start beta → done beta → start gamma → done gamma.
- Reset pendant l’exécution restaure l’état masqué. Les anciens effets ne doivent pas revenir après attente. Relancez ensuite.
- Avec mouvement réduit dans le système ou les outils, affichage immédiat et Reduced motion: shown immediately.
Clics multiples et réinitialisation
Start est désactivé et la fonction vérifie busy. Même un appel programmé n’empile pas une autre séquence. Les fins sont comptées par élément ; un rappel n’indique pas toute la collection.
.stop(true, true) vide l’attente et termine l’effet courant. Reset change d’abord generation pour invalider les anciens rappels, puis termine et masque. jumpToEnd peut déclencher la fin : ne l’appelez pas avant l’invalidation.
Cela évite de réutiliser états et files résiduels. clearQueue seul n’arrête pas l’effet actif. Des setTimeout distincts nécessiteraient une annulation distincte ; ici delay utilise la file fx.
.queue() journalise puis appelle next() pour poursuivre vers fadeIn. Sans next(), la file reste bloquée. En série, seul l’achèvement lance l’index suivant.
Préférences et disposition réelle
prefers-reduced-motion reduce évite attente et fondu pour établir immédiatement l’état final. Ce réglage concerne l’exemple, pas les effets globaux. La décoration ne doit pas retarder l’information importante.
Afficher depuis display:none crée de l’espace et déplace le contenu suivant. Réservez la place ou choisissez une autre technique pour des positions stables. Les contrôles masqués nécessitent aussi une conception du clavier et du focus.
Pour les ajouts dynamiques, redéfinissez collection et nombre de fins. $items garde les trois premiers sans ajout automatique. Décidez entre tout rejouer et animer seulement les nouveaux, puis adaptez files et restauration.
