隨機引用機器 - 點擊jQuery改變顏色

我一直在做freecodecamp的挑戰之一，可以得到一個簡單的功能工作出於某種原因，我真的還沒有線索呢。
我想改變一些使用jQuery的點擊元素的CSS（類似於示例網站，真的很喜歡這個想法），但它不起作用。請幫忙..
我有不同顏色的變量。隨機引用機器 - 點擊jQuery改變顏色

var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 

var randomColor = Math.floor(Math.random() * colors.length); 
    $("body").animate({ 
    backgroundColor: colors[randomColor], 
    color: colors[randomColor] 
    }, 500);

但它不工作，我想這太：

var red = Math.floor(Math.random() * 255); 
var green = Math.floor(Math.random() * 255); 
var blue = Math.floor(Math.random() * 255); 
var color = "rgb(" + red + "," + green + "," + blue + ")"; 
$("body").animate({backgroundColor: color}, 1000);

只有工作是這樣的，但我不知道如果我可以用這個方法

document.getElementById("body").style.backgroundColor = colors[randomColor];

動畫顏色的一個

所以我的問題是，我可以動畫使用document.getElementById方法，爲什麼jQuery不工作？我使用codepen.io並在設置中加載了jQuery（與jQuery UI一起）。

來源

2017-05-03 poohateq

我相信你需要包括jQueryUI能夠爲背景顏色設置動畫。雖然用CSS代替JS可以更好地做到這一點 –

你有5個答案，你沒有評論過其中的一個。有幫助嗎？接受答案或至少評論以獲得更多信息/指導將是很好的。 –

對不起，即時通訊新的，給大家upvote，但看起來像我需要一些聲譽來計算。我嘗試了所有的答案，並使用James Monger的css解決方案。 – poohateq

這可以用CSS單獨解決。

添加到您的CSS：

body { 
    transition: background-color 0.5s ease; 
}

然後，您可以使用您的代碼來改變background-color，這將觸發轉換：

document.getElementById("body").style.backgroundColor = colors[randomColor];

JSFiddle example

Google has information on why you would use CSS vs JS animations。

來源

2017-05-03 12:53:41

你應該嘗試改變一個div

$(document).ready(function() { 
    $('div').click(function(){ 
     var back = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"];; 
     var rand = back[Math.floor(Math.random() * back.length)]; 
     console.log(rand); 
     $('div').css('background',rand); 
    }) 
})

Working fiddle

來源

2017-05-03 12:52:58 Manoj

你可以用CSS動畫的backgroundColor以及

body { 
    background-color: #AD310B; 
    -webkit-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
}

只需設置的backgroundColor使用JavaScript的背景顏色這個例子它會動畫。但我不確定getElementById("body")是否正確。更多類似document.querySelector("body")

document.getElementById("body").style.backgroundColor = colors[randomColor];

來源

2017-05-03 12:53:00 Mazz

答案是否定的，你不能用普通的JQuery動畫，在他們的文檔

動畫屬性解釋和值

所有動畫屬性應該是動畫到一個數字值，除非如下所述;大多數非數字屬性不能使用基本的jQuery功能來動畫（例如，寬度，高度或左側可以是動畫，但背景顏色不能，除非使用jQuery.Color插件）。

見http://api.jquery.com/animate/

對於彩色動畫，可以使用mentioned plugin或別的東西一樣一樣jQuery UI

來源

2017-05-03 12:53:31

$(document).ready(function(){ 
 

 
$('button').click(function(){ 
 
    var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 
 
    var randomColor = Math.floor(Math.random() * colors.length) + 0; 
 
    $("body").animate({backgroundColor: colors[randomColor]}, "slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script> 
 
<body> 
 
<button >Click Here</button> 
 
<div class="colorChange"> 
 

 
this will change color 
 
</div> 
 
</body>

請檢查代碼。我認爲它可能會幫助你

謝謝

來源

2017-05-03 13:07:06

隨機引用機器 - 點擊jQuery改變顏色

回答

相關問題