jQuery .each() - 如何迭代项目并分别为每个项目设置动画以引起链式 react

Question

我有一个页面，其中有 100 个盒子相互堆叠，摇摇欲坠。我想用一些 jQuery 动画来模拟这种摇摇欲坠的情况，让它们以涟漪效果来回摇摆。

我第一次尝试这个:

$("#teetering-tester").click(function () {
    $("#box-stack div").each(function (id) {
        $(this).animate({ 'margin-right': "+=3px" }, 300 + id, function () {
            $(this).animate({ 'margin-right': "-=3px" }, 300 + id);
        });
    });
    return false;
});

但这会让整个堆栈向右移动，然后再向右移动。

我希望能产生链式 react 。因此，我尝试使用 setTimeout() 打开新线程:

$("#doTeeter").click(function () {
    $("#output").append("<li>Starting</li>");
    $("#box-stack div").each(function (id) {
        setTimeout($(this).animate({ 'margin-right': "+=3px" }, 300 + id, function () {
            $(this).animate({ 'margin-right': "-=3px" }, 300 + id);
        }), 700, function () {
            $("#output").append("<li>I'm done</li>");
        });
    });
    return false;
});

同样的事情 - 整个堆栈一致移动。

然后我尝试:

$("#doTeeter").click(function () {
    $("#box-stack div").each(function (id) {
        setTimeout(teeterStack(id), 700);
    });
    return false;
});

... 

function teeterStack(id) {
    $("#box-stack div").eq(id)
        .animate({ 'margin-right': "+=3px" }, 500 + id, function () {
            $(this).animate({ 'margin-right': "-=3px" }, 300 + id);
        });
    });
}

但它们仍然一起移动。

如何在我的 100 个盒子上产生链式 react ？

任何帮助将不胜感激。

谢谢， 斯科特

更新

哦，我刚刚注意到我尝试通过使动画持续时间成为 300 毫秒加上项目 ID 的函数来添加一些可变性。

更新2

我刚刚尝试过这个，它还可以，但有点不稳定:

function teeterStack(id) {
    $("#box-stack div").eq(id)
        .animate({ 'margin-right': "+=3px" }, getTime(id), function () {
            $(this).animate({ 'margin-right': "-=3px" }, getTime(id));
        });
}
function getTime(id) {
    var min = 300, max = 2000, step = (max-min)/100;
    return (step*id) + min;
}

但是我不知道delay()，所以我要尝试一下。

Answer 1

诀窍是根据元素索引延迟效果的开始。这是未经测试的戳它。注意:使用您的第一个示例。

$("#teetering-tester").click(function () {
    $("#box-stack div").each(function (id) {

        var stallFor = 300 * parseInt(id); // 300 is the gap between delays, tweek it based on visual preference

        $(this).delay(stallFor).animate({ 'margin-right': "+=3px" }, function () {
            $(this).animate({ 'margin-right': "-=3px" });
        });
    });
    return false;
});

建议

我会使用index而不是id。变量所代表的含义令人困惑。