jquery - 第 n 个子元素，为每个 4 的倍数的元素分配样式

Question

我有一个基于 4 列网格的布局，我想以类似的方式应用 CSS3 动画；

<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->
<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->

所以基本上，第一列中的元素的动画持续时间为 1 秒，第二列中的元素的动画持续时间为 2 秒，等等。

我怎样才能用第 nth-child 实现这个目标？

Answer 1

要回答您所写的问题，您需要四种样式，一种用于每个动画持续时间:

.block:nth-child(4n) {
    animation-duration: 1s;
}

.block:nth-child(4n+1) {
    animation-duration: 2s;
}

.block:nth-child(4n+2) {
    animation-duration: 3s;
}

.block:nth-child(4n+3) {
    animation-duration: 4s;
}

:nth-child syntax an + b 允许您使用 a 指示您的循环频率，并使用 b 指示您的初始偏移量。每个持续时间样式都需要自己的 b 偏移量。

但是，如果您想将其推广到 m 种样式(而不是仅仅 4 种)，您可能应该通过脚本应用样式，而不是手动编写它们。