Quiero agregar una clase después de 2 segundos y eliminarla después de 7 segundos y cuando la elimine nuevamente agregar la clase después de 2 segundos y eliminarla después de 7 segundos
$(document).ready(function() { function removeAddClass1() { $(".video_title").removeClass("level_show"); setTimeout(removeAddClass1, 7000); } removeAddClass1(); function removeAddClass2() { $(".video_title").addClass("level_show"); setTimeout(removeAddClass2, 2000); } removeAddClass2(); }); .video_title { color: red; } .video_title.level_show { color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="video_title">Video title</h2>Sugiero usar fotogramas clave CSS para esto:
.video_title { color: red; animation: levelshow 7000ms infinite; } @keyframes levelshow { 29.9% { color: red; } 30% { color: green; } 99.9% { color: green; } 100% { color: red; } } <h2 class="video_title">Video title</h2>Aquí hay una forma de hacerlo con JavaScript:
window.onload = () => { document.querySelector(".video_title").classList.remove("level_show") toggleSequence() setInterval(toggleSequence, 7000); } function toggleSequence() { setTimeout(() => { document.querySelector(".video_title").classList.toggle("level_show"); }, 2000) setTimeout(() => { document.querySelector(".video_title").classList.toggle("level_show"); }, 7000) } .video_title { color: red; } .video_title.level_show { color: green; } <h2 class="video_title">Video title</h2>Esto se hace mediante javascript y jQuery sin utilizar CSS keyframes .
// for switch class const switchCls = (selector, cls) => $(selector).toggleClass(cls); // delay and do task const delay = (action, ms) => { return new Promise((resolve) => { const newAction = () => { action(); resolve(action); }; setTimeout(newAction, ms); }); }; // ensure execution order const task = (selector, cls) => { const switchFn = () => switchCls(selector, cls); delay(switchFn, 2000).then(action => delay(action, 7000) ).then(action => task(selector, cls) ); }; // start execution task('.video_title', 'level_show'); // screen timer let second = 0; setInterval(() => { $('h1').text(`${++second} second`); }, 1000); .video_title { color: red; } .video_title.level_show { color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="video_title">Video title</h2> <h1>0 second</h1>