创建 N 个动画对象答案

【问题标题】：Create N animated objects创建 N 个动画对象
【发布时间】：2012-01-07 10:58:54
【问题描述】：

我想通过 jQuery 创建一些隐藏对象，（一旦全部创建）slideDown() 依次，一个接一个。我不希望第二个对象等待第一个对象完成整个 slideDown()，但它需要一定的延迟。

我拥有的（不工作的）代码如下：

$(document).ready(function() {

        var i = 3;

    var AnimFunc = function() {

        $('#container').append('<div id="elem_' + i + '>' + i + '</div>').hide().slideDown();
        --i;
        i == 0 ? clearInterval(startAnim) : null; // clear interval to prevent infinite loop

    }

    startAnim = setInterval(AnimFunc, 500); // 500 delay between slideDowns.

});

我想在没有 setInterval 和 clearInterval 的情况下使用 do/while 甚至应该是可能的。

我希望我的问题很清楚，有人能够帮助我。

谢谢，克纳尔

【问题讨论】：

我只能说：if (i===0) clearInterval(startAnim); 比您的三元运算符 ? : 更容易阅读和输入更少。

标签： jquery jquery-animate delay intervals

【解决方案1】：

当您生成 id 时，添加 i 后会丢失双引号
使用这个：' + i + ' "

【讨论】：

【解决方案2】：

不知道我明白你想做什么，但也许是这样的：

var objectNumb = 10,
    speed = 1500;

$(document).ready(function() {
    for (var i=objectNumb; i>=1; i--) {
        $('#container').append('<div id="elem_'+i+'">'+i+'</div>').hide().delay(speed).slideDown(speed);
    }
});

FIDDLE

【讨论】：

@nnnnnn;谢谢，你完全正确。对我来说，js就像一门外语；可以阅读，但很难写。谢谢！ @ali youhannaei；感谢您的提醒，我的草率复制/粘贴/编辑。 @adeneo;搞定了！正是我需要的！谢谢。谢谢各位，帮了大忙！
嗯，有点高兴得太早了！所有 div 在开始之前等待前一个 div 完成动画。我希望能够（例如）使动画每个 div 5 秒，但在前一个 div 之后 1 秒开始每个新 div。在实践中，这意味着 div #6 将在 #1 完成时开始。再次感谢各位！ ——
我希望我的意思很清楚，我真的很喜欢这个解决方案的这个特定功能。提前致谢。
啊，我明白了。问题是我的代码，写得很匆忙，现在它似乎隐藏并向下滑动容器而不是元素。这有点棘手，但像THIS FIDDLE 这样的东西应该可以帮助你。你可能不得不摆弄位置和计时器才能让它正确。
太棒了！就是这样！我将不得不更好地查看代码以了解它为什么会这样做，但效果是我想要的！谢谢！