随机报价机 - 点击 jQuery 更改颜色

Question

我一直在做 freecodecamp 中的一项挑战，并且由于某种原因可以获得一个简单的功能，但我真的不知道。
我想使用 jQuery 更改某些点击元素的 css（类似于示例站点，我真的很喜欢这个想法），但它不起作用。请帮忙..
我有不同颜色的变量。

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）。

Answer 1

您应该尝试使用此示例来更改 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

Answer 2

您也可以使用 css 为 backgroundColor 设置动画

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

只需将背景颜色设置为 javaScript 即可 animate.But 我不确定 getElementById("body") 是否正确。更像是 document.querySelector("body")

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

Answer 3

答案是否定的，您不能使用普通 JQuery 制作动画，如他们的文档中所述

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used).

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

对于彩色动画，您可以使用 mentioned plugin or something else like like jQuery UI

Answer 4

这可以单独使用 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.

Answer 5

$(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>

请检查代码。我认为它可能对您有所帮助

感谢

随机报价机 - 点击 jQuery 更改颜色

random quote machine - changing colors on click with jQuery

javascript

css

jquery

quote