使用jquery和Math.random动态生成<；span>；我们在不同的时间制作动画

我正在尝试创建一个纸张掉落效果，我正在尝试让我的每个

在不同的时间使用

Math.random

数字开始动画。我尝试过一些事情，但这是我来这里之前尝试过的最后一件事。。。有人知道怎么做吗

var maxBills = 100; //max amount per page

//generate random number

for (var i = 0; i < maxBills ; i ++){

    var randomNumber = Math.floor(Math.random()*1500);

    var randomPosition = Math.floor(Math.random()*10);

    var bills = $("<span>")
                    .addClass('billsBillsBills')
                    .text('paper')
                    .css({
                        left : randomNumber,
                    })

    //have each bill start falling at a different time

    var fall = $(bills).css('-webkit-animation-duration', randomNumber );

        $('body').append(bills);



}

var maxBills=100//每页最大金额
//生成随机数
对于（变量i=0；i

下面是我发布的代码，并附带了一些注释来解释发生了什么

var maxBills = 10; // Start with a reasonable number of objects

// We need to set the height of the container. I've never found
// (or at least can never remember) a way to do this in pure CSS.
$(document.body).css({height: window.innerHeight});

// I'm naming the animation function twice here, which is not
// technically necessary. If I were worried about debugging, having a
// name after the function keyword would help.
// Also, I'm naming the parameter $e to indicate that I expect a jQuery
// element object.
var randBill = function randBill($e) {
    // randomNumber: the random duration of the animation from 0 to 1.5 seconds
    var randomNumber = Math.floor(Math.random()*1500);

    // randomPosition: the random new "left" value, in %.
    //   This is set up to range from 25% to 75%
    var randomPosition = Math.floor(Math.random()*50) + 25;

    // Since you described wanting a "falling paper" animation, I decided
    // to add a random fall value as well. This ranges from -5 (actually
    // rising 5 pixels) to 45 pixels down.
    var randomFall = Math.floor(Math.random()*50) - 5;

    // Grab essential metrics as integers:
    //     For these values, jQuery actually kind of gets in the way.
    //     At the end I'll link to a pure HTML5 canvas implementation
    //     that is much more computationally efficient.
    var parentHeight = parseInt($e.parent().css("height"));
    var billTop = parseInt($e.css("top"));

    // The first time through, $e.css("top") returns undefined.
    if (isNaN(billTop)) billTop = 0;
    var billHeight = parseInt($e.css("height"));

    // This line checks to see if we've already reached the bottom of the
    // container. If so, we don't want to move past it.
    var newTop = Math.min(parentHeight - billHeight, billTop + randomFall);

    // Here we use jQuery's animate function to change the position and
    // make sure this function gets called again when the animation is done.
    $e.animate(
        {left: randomPosition + "%", top:newTop + "px"}, // The target values
        randomNumber, // The duration of the animation
        "swing", // The "easing" function. This is the default.
                 // It causes realistic acceleration / deceleration.
        function() { // This is the function that will be called when the
                     // current animation is complete.

          // We're done if we reached the bottom
          if (newTop < parentHeight - billHeight) {
            randBill($e); // Just call this function again 
          }
    });
};

// This is essentially a constructor for a "Bill" object
var makeBill = function() {
                var bill = $("<span>")
                    .addClass('billsBillsBills')
                    .text('paper');
                return bill;
};

// Make an array of bills with the size specified up top
var bills = [];
for(var i = 0; i < maxBills; i++) {
    bills.push(makeBill());
}

// Add the bills to the DOM
$('body').append(bills);

// Not every browser has Array.map yet, but they should! This function will
// be called once on each element of the array. It's important that I call
// this function after the elements have been added to the DOM so that
// el.parent() actually returns the container object.
bills.map(function(el) { randBill(el); });

var maxBills=10；//从合理数量的对象开始
//我们需要设置容器的高度。我从来没有找到过
//（或者至少永远不会记得）在纯CSS中实现这一点的方法。
$（document.body）.css（{height:window.innerHeight}）；
//我在这里给动画函数命名了两次，这是不正确的
//技术上是必要的。如果我担心调试，有一个
//函数关键字后面的名称将有所帮助。
//另外，我将参数命名为$e，以表示我希望使用jQuery
//元素对象。
var randBill=函数randBill（$e）{
//randomNumber：动画的随机持续时间，从0到1.5秒
var randomNumber=Math.floor（Math.random（）*1500）；
//随机位置：随机的新“左”值，单位为%。
//此设置范围为25%到75%
var randomPosition=Math.floor（Math.random（）*50）+25；
//因为你说想要一个“落纸”动画，我决定
//也可以添加一个随机下降值。范围为-5（实际上
//上升5像素）到下降45像素。
var randomFall=Math.floor（Math.random（）*50）-5；
//以整数形式获取基本度量：
//对于这些值，jQuery实际上有点碍事。
//最后，我将链接到一个纯HTML5画布实现
//这在计算效率上要高得多。
var parentHeight=parseInt（$e.parent（）.css（“height”）；
var billTop=parseInt（$e.css（“top”））；
//第一次通过$e.css（“top”）返回未定义。
如果（isNaN（billTop））billTop=0；
var billHeight=parseInt（$e.css（“height”）；
//这一行检查我们是否已经到达底部
//容器。如果是这样，我们不想越过它。
var newTop=Math.min（parentHeight-billHeight，billTop+randomFall）；
//这里我们使用jQuery的animate函数来更改位置和位置
//确保动画完成后再次调用此函数。
$e.animate(
{left:randomPosition+“%”，top:newTop+“px”}，//目标值
randomNumber，//动画的持续时间
“swing”/“easing”函数。这是默认值。
//它会导致真实的加速/减速。
function（）{//这是当
//当前动画已完成。
//如果我们到达底部，我们就完了
if（newTop

---

因为我们真的不关心用户和单个“账单”的交互，所以我们实际上不需要DOM元素，所以纯HTML5画布实现应该更高效。我自己没有注意到jQuery版本有任何性能问题，但理论上我更喜欢canvas版本。请看它的演示。我不喜欢我的canvas版本，因为我没有实现像jQuery的“swing”这样的放松功能，因此，账单会以一种有点刺耳的之字形移动，而不是平滑的摆动。

你应该发布一个包含周围CSS和任何相关HTML标记的JSbin示例：）如果你想让动画在不同的时间开始，那么你可能想随机化

动画延迟

而不是

动画持续时间

。文档：PS。这可能是requestAnimationFrame（纯JS动画）而不是CSS的一个很好的用例。在我看来，这种方法比JS（用于随机化）和CSS（用于动画）的混合更具可读性。但这完全是你的决定。：）到底是什么不起作用？你是说css调整中的

left:randomPosition

吗？另外，如果你想让它们的动作彼此不同，你需要循环查看

账单。设置一个上下文需要花费很多时间，但是一旦你得到了它，你只需要在每一帧更新顶点，GL就可以处理其余的，另外你还可以在着色器中应用各种效果。此外，模拟必须在（-1.0,1.0）空间而不是像素空间中进行。这需要一段时间来适应。