j查询没有插件的随机失败对象

Question

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

雪花飘落 函数 fallingSnow（） {

    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);

斯菲德尔

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>