这可能是一个奇怪的问题，但是有没有办法在一段时间内将一个类一个一个地添加到多个元素中？例如，如果我有一个段落，其中包含 7 个跨度，每个跨度有一个字母....和类为 .up 的 CSS 文件:
.up {
position: relative;
animation: goUP 1s linear 0s;
animation-iteration-count: infinite
}
@keyframes goUP{
0%, 100% {
top: 0px
}
50% {
top: -12px
}
}
有没有办法设置 7 秒的间隔，并且每秒将类 .up 添加到其中一个元素？我尝试了 for-cyclus、setInterval，但没有任何效果。我还在学习，所以不要对我太粗鲁:)。
最佳答案
我不知道你是否只想使用 jquery 模式来做到这一点，但这里有一个纯 javascript 的解决方案:
<html>
<title></title>
<body>
<p id="paragraph">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
</p>
<script>
var p = document.getElementById("paragraph");
var spans = p.getElementsByTagName('span');
var seconds = 7;
var index = 0;
function timeout() {
setTimeout(function () {
// create a recursive loop util all elements.
if(index < spans.length) {
spans[index].className += "up";
console.log(spans[index].className);
index ++;
timeout();
}
}, seconds * 1000);
}
timeout();
</script>
</body>
无论如何，您都可以根据自己的代码调整它。
关于jquery - 在一段时间内向元素添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45517127/