我想在 2 秒后添加一個類并在 7 秒后將其洗掉，當再次洗掉時，在 2 秒后添加類并在 7 秒后將其洗掉
$(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>uj5u.com熱心網友回復：
我建議為此使用 CSS 關鍵幀：
.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>這是使用 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>uj5u.com熱心網友回復：
這是通過使用javascript和jQuery不使用來完成的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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485391.html
標籤：javascript jQuery css