Question

我有一页,有100个箱子被打上顶顶,打上了间歇。我想用一些 j笑 an来模拟这种 te,使其回旋并产生连锁反应。

我第一次尝试这样做:

$("#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;
});

但是,这使得整个方面走向正确,进而走向正确。

我希望产生连锁反应。因此,我试图以定时的方式打开新的天线:

$("#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);
        });
    });
}

但是,他们仍然走到一起。

How can I make a ripple effect across my 100 boxes?

任何帮助都将受到赞赏。

Thanks, Scott

Update

奥赫先生,我刚刚注意到,我试图增加一些变异性,使估计时间成为300米的功能,加上该项目的id。

Update 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

The trick is to delay the start of effect based on the elements index. Here s an untested poke at it. NOTE: using your first example.

$("#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;
});

Suggestion

页: 1 它混淆了变量的含义。

Answer 2

我认为,你有定时的正确想法,但问题是,你在时间上重新使用同样的价值。提供随机(或半随机)价值,说明设定时间功能的第二个论点,以取得你想要的效果。假设这些编号是顺序编号,我就建议如下内容:<编码>(teeterStack(id),700+(id*100);。

注

Update

Update 2

Suggestion

友情链接