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设置backgroundColor，它就会生成动画。但我不确定getElementById("body")是否正确。更像是document.querySelector("body")

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

Answer 3

答案是否定的，你不能使用普通的JQuery动画，正如他们的文档

中所解释的那样

动画属性和值

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color插件）。

请参阅http://api.jquery.com/animate/

对于彩色动画，您可以使用mentioned plugin或其他类似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

＆＃13;

$(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");
  });
});

＆＃13;

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

＆＃13;

请检查代码。我认为这可能会对你有所帮助

谢谢

随机报价机 - 用jQuery点击改变颜色

5 个答案: