document.addEventListener("DOMContentLoaded", () => { const opt1 = document.querySelectorAll(".option-1"); const opt2 = document.querySelectorAll(".option-2"); let showingOpt1 = true; const switchDelay = 4000; // time between swaps in ms const animationTime = 500; // fade duration in ms // Initialize option-1 visible and option-2 hidden opt1.forEach(el => { el.style.display = "block"; el.style.opacity = 1; el.style.transition = `opacity ${animationTime}ms ease`; }); opt2.forEach(el => { el.style.display = "none"; el.style.opacity = 0; el.style.transition = `opacity ${animationTime}ms ease`; }); function fadeOut(group, callback) { group.forEach(el => { requestAnimationFrame(() => { el.style.opacity = 0; // start fade out }); }); setTimeout(() => { group.forEach(el => { el.style.display = "none"; }); // hide after fade if (callback) callback(); }, animationTime); } function fadeIn(group) { group.forEach(el => { el.style.display = "block"; // put back in layout el.style.opacity = 0; // start invisible void el.offsetWidth; // force reflow requestAnimationFrame(() => { el.style.opacity = 1; // fade in }); }); } function switchOptions() { if (showingOpt1) { fadeOut(opt1, () => fadeIn(opt2)); } else { fadeOut(opt2, () => fadeIn(opt1)); } showingOpt1 = !showingOpt1; } setInterval(switchOptions, switchDelay); });