Question

我在一个主DIV中有9个DIV。我试图将以下逻辑应用于每个孩子，以便他们在下一个孩子之后制作动画。这就是我所拥有的，而且它不起作用。建议/建议非常感谢。

var allReds = $('#redSwatches').children();

for (var allReds = 0; allReds < 9; allReds++) {
    var timerTwo = setTimeout(function() {
        $('#red1').addClass('scale');
    }, 5000);

    var timerThree = setTimeout(function() {
        clearTimeout(timerTwo);
        $('#red1').removeClass('scale');
    }, 5500);
}

Answer 1

我假设您在div内有9 div#redSwatches个。代码有一些问题。

您已将子div分配给变量allReds。然后，您将0分配给同一个变量。

此外，循环仅动画单个元素#red1 9次，但这9个动画都在同一时间发生。此外，clearTimeout在这里似乎毫无用处。

现在我认为它应该是：

var allReds = $('#redSwatches').children();    // get the children

for (var i = 0; i < 9; i++) {    // use another counter i
    setTimeout(function() {    // since the animation happens once, you don't need to save it in a variable
        $( allReds[i] ).addClass('scale');    // get next child allReds[i]
    }, i*500);    // ..and animate one after another every .5 second

    setTimeout(function() {
        $( allReds[i] ).removeClass('scale');
    }, i*500 + 500);    // second animation on same element, .5 second after it started
}

在For循环中将jQuery计时器设置为DIV子项

1 个答案: