Question

也许是一个奇怪的问题但是有没有办法在一段时间内逐个添加一个类到多个元素？例如，如果我有一个段落，其中包含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但没什么用。我还在学习，所以不要对我太粗暴:)。

Answer 1

我不知道你是否只想要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>

无论如何，您可以将其改编为代码。

在一段时间内向元素添加类

1 个答案: