jQuery .each () - как перебирать элементы и анимировать каждый из них в отдельности, вызывая эффект ряби

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 мс плюс идентификатор элемента.

Обновление 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;
});

Предложение * * 1004 Я бы использовал index вместо id. Это сбивает с толку то, что представляет переменная.

Answer 2

Я думаю, у вас правильная идея с setTimeout, но проблема в том, что вы используете одно и то же значение для времени ожидания.Укажите случайное (или почти случайное) значение для второго аргумента функции setTimeout, чтобы получить желаемый эффект.Предполагая, что идентификаторы являются последовательными числами, я бы предложил что-то вроде setTimeout(teeterStack(id), 700+(id*100));

Примечание: я не проверял это ...