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;
});

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

我希望有涟漪效应。所以，我尝试用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个盒子中产生连锁反应？

任何帮助将不胜感激。

谢谢，斯科特

更新

哦，我刚注意到我试图通过使动画持续时间为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;
}

但是我不知道延迟（）所以我要给它一个镜头。

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。关于变量代表什么令人困惑。

Answer 2

我认为你对setTimeout有正确的想法，但问题是你在超时时间使用相同的值。为setTimeout函数的第二个参数提供随机（或半随机）值，以获得所需的效果。假设ID是序列号，我建议使用setTimeout(teeterStack(id), 700+(id*100));

注意：我没有测试过这个...

jQuery .each（） - 如何迭代项目并分别为它们设置动画，从而产生连锁反应

更新

更新2

2 个答案:

建议