CSS属性不会使用jQuery更改

Question

i'm making NY card and trying to set all snowflakes in random place, but snowflakes position from left works, but top doesn't.

 var snowflakes = $("#snowflakes"); var snowflakesCount = snowflakes.data("count"); console.log(snowflakesCount); for (var i = 0; i < snowflakesCount; i++) { var snowflake = $('<div class="snowflake"></div>').appendTo(snowflakes); var left = (Math.round(Math.random() * 80)) + "%"; var top = (Math.round(Math.random() * 40) + 20) + "%"; snowflake.css("top", top); snowflake.css("left", left); } 

 body { background: #1a0d81; } .snowflake { position: fixed; top: 50px; left: 50px; background: url("../image/snowflake.png"); width: 32px; height: 33px; transition: 5s all linear; } #snowflakes { position: absolute; width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="snowflakes" data-count="10"></div> 

snowflake.css("top", top) doesn't work. All i got is http://imgur.com/a/RmGCp

Answer 1

https://www.nczonline.net/blog/2007/06/03/javascript-variable-names-you-shouldn-t-use/

You shouldn't use top as a var

Answer 2

Here's a working snippet. The other answer includes details as to why.

---

The snippet was giving an error against var top =

Changed the var name and it works fine:

 var snowflakes = $("#snowflakes"); var snowflakesCount = snowflakes.data("count"); console.log(snowflakesCount); for (var i = 0; i < snowflakesCount; i++) { var snowflake = $('<div class="snowflake">*</div>').appendTo(snowflakes); var left = (Math.round(Math.random() * 80)) + "%"; var topxx = (Math.round(Math.random() * 40)) + "%"; //console.log(topxx); snowflake.css("left", left); snowflake.css("top", topxx); } 

 body { background: #1a0d81; } .snowflake { position: fixed; top: 50px; left: 50px; width: 32px; height: 33px; transition: 5s all linear; color:white; } #snowflakes { position: absolute; width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="snowflakes" data-count="10"></div> 

Answer 3

Here's a working code that was discussed here on SO .
Might not resolve your issues with this but will get you where you want: [jfiddle][2.]
Another option is a JQuery-snowfall .
And a working example of this plugin SnowFall .

Good luck