没有插件的jQuery随机失败对象？

Question

我正在为假期制作一张贺卡，我想要一些雪花飘落。我不想使用插件来实现这一点。我生成了一些随机在屏幕上放置雪花的代码。我正在尝试使用 for 循环一次在屏幕上随机放置多达 20 个薄片。似乎将 20 个雪花实例放在同一位置。我希望它是随机的。

// 雪花飘落 函数落雪（）{

    var snowflake = $('<div class="snowflakes"></div>');
    $('#snowZone').prepend(snowflake);
    snowX = Math.floor(Math.random() * $('#site').width());
    snowSpd = Math.floor(Math.random() + 5000);

    snowflake.css({'left':snowX+'px'});
    snowflake.animate({
        top: "500px",
        opacity : "0",

    }, snowSpd, "easeInCirc", function(){
        $(this).remove();
        fallingSnow();
    });

}
var timer = Math.floor(Math.random() +1000);

window.setInterval(function(){
    fallingSnow();
}, timer);

jsfiddle

Answer 1

修改元素，而不是修改其类的所有元素。

function fallingSnow() {
  var snowflake = $('<div class="snowflakes"></div>');
  $('#site').prepend(snowflake);
  snowX = Math.floor(Math.random() * $('#site').width());
  snowSpd = Math.floor(Math.random() * (500) * 20) + 1000;

  snowflake.css({
    'left': snowX + 'px'
  });
  snowflake.animate({
    top: "200px", // height of area
    opacity: "0",

  }, snowSpd, function() {
    $(this).remove();
    fallingSnow();
  });
}
for (var i = 0; i < 100; i++) {
  fallingSnow();
}

.snowflakes {
  width: 10px;
  height: 10px;
  background: black;
  position: absolute;
  top: -40px;
}
#site {
  width: 400px;
  height: 200px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="site"></div>