CSS屬性不會改變使用jQuery

我使紐約卡，並試圖設置所有的雪花在隨機的地方，但從左側的雪花位置工作，但頂部沒有。CSS屬性不會改變使用jQuery

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

來源

2017-01-05 Nikita

檢查'snowflake'格 –

您的代碼似乎是在這裏很好的工作：https://jsfiddle.net/2yrejfkr/，你確定沒有別的干擾？ - @PardeepDhingra，你的代碼工作正常，你只是有一個404的背景圖像，所以你的雪花實際上都不可見。如果你做一個檢查元素，它們都是隨機定位的，都是「頂」和「左」。 – Santi

如下所述，你的問題是你使用'top'作爲變量名，它是javascript中的一個保留關鍵字，並且指向一個窗口相對的頂部位置。我假設它在我的JSFiddle因爲相對性而起作用，而如果你單獨運行它，它會出錯。請參閱下面的答案，並在將來避免使用保留關鍵字作爲變量名稱。 – Santi

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

你不應該使用top作爲VAR

來源

2017-01-05 16:54:37 Axnyff

這就是答案，很高興很快就會暈倒。將該變量重命名爲xTop，它會奇蹟般地開始工作。 – epascarello

@epascarello雖然我同意在保留字之後命名變量是一個不允許的並且會導致問題，但對於爲什麼在某些情況下可以正常工作的任何見解？例如，如果您通過JSFiddle複製代碼，則沒有問題：https：//jsfiddle.net/2yrejfkr/ - 只是好奇！ – Santi

@Santi如果你將它作爲snipplet運行，它會在Chrome中運行。我用top和without驗證了它的錯誤。這是鉻的「窗口」。嘗試一下，用snipplet做出答案。 – epascarello

這裏的工作片段。另一個答案包括爲什麼的細節。

該片段是給對var top =

錯誤改變了變數名稱和它的作品罰款：

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>

來源

2017-01-05 17:01:36

時間前我收到了投票，因爲我說了一個其他人的同樣的事情，但有一個工作的例子。 – Laurianti

@Laurianti評論時請謹慎一點。你已經對這個問題的不同答案評論了三個不同的時間，並且很容易做出一個例子，沒有一個人提供任何價值或者深思熟慮的討論要點 - 其中一個簡單地說「這是正確的答案」，另一個只是一個已經在評論留下的答案中提供的鏈接，而這個鏈接本質上只是說你也提出了相同的答案。 – Santi

下面是在這裏討論一個工作代碼SO。
可能無法解決您的問題，但會將您帶到您想要的位置：[jfiddle] [2。]
另一個選項是JQuery-snowfall。
以及該插件的一個工作示例SnowFall。

好運

來源

2017-01-05 17:33:27 Jadeye

CSS屬性不會改變使用jQuery

回答

相關問題