CSS屬性不會使用jQuery更改

Question

我正在制作NY卡，並嘗試將所有雪花設置在隨機位置，但是從左起的雪花位置有效，但頂部沒有。

 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)不起作用。 我得到的只是http://imgur.com/a/RmGCp

Answer 1

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

您不應該將top用作var

Answer 2

這是一個工作片段。 另一個答案包括有關原因的詳細信息。

---

該代碼段針對var top =給出了錯誤

更改了var名稱，它可以正常工作：

 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

這是在SO上討論過的工作代碼。
可能無法解決您的問題，但可以將您帶到您想要的地方：[jfiddle] [2。]
另一種選擇是JQuery-snowfall 。
還有此插件SnowFall的一個工作示例。

祝好運