Question

我正在尝试生成5个div但是有不同的类号，比如ball1，ball2 ...和ball5，遵循适用于我的代码

$(document).ready(function () {
      for (var i = 1; i < 5; i++) {
         var rand = Math.floor((Math.random()*5)+1);
         $('.bar').append("<div class='ball"+i+"'></div>");
    }
});

现在我想为上面的rand编号后面的CSS中的数字指定不同的CSS样式

-webkit-animation: bounce 1s infinite linear;
-moz-animation: bounce 1s infinite linear;

你能告诉我怎么做吗？

Answer 1

您必须为每个div使用内联样式。我还建议只设置animation-duration属性，而animation道具的其他部分可以在CSS中定义。

$(document).ready(function () {
    for (var i = 1; i <= 5; i++) {
        var rand = Math.floor((Math.random()*5)+1);
        $('.bar').append($("<div />", {
            attr: {
                class: 'ball'+i
            },
            css: {
                webkitAnimationDuration: rand + 's',
                mozAnimationDuration: rand + 's'
            }
        }));
    }
});

和CSS：

.bar > div {
    -webkit-animation: bounce 1s infinite linear;
    -moz-animation: bounce 1s infinite linear;
}

顺便说一句，你的循环创建了4个div，而不是5个。

以下是工作示例：http://jsfiddle.net/dK5N3/

从Loop为生成的类分配CSS的问题

1 个答案: