Javascript 动画中的属性？

我试图让我的背景颜色改变时，有人他的按钮，但它似乎不工作

我将十六进制颜色存储在一个数组中，然后使用inf math.random生成一个随机颜色。我一直在用chrome进行调试，无法找出问题所在

$(document).ready(function() {
var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F', '#008080', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99', '#77b1a9', '#73a857'];


    $("#getQuote").on("click", function(){
      $.getJSON("http://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en", function(json) {
        $(".id").html(JSON.stringify(json));
      });
    });

    $("getQuote").click(function(){
      var color = Math.floor(Math.random() * colors.length);
      $("html body").animate({
        backgroundColor: colors[color]
      }, 1000);
    });
  });

编辑我发布了所有的代码，以便更好地了解正在发生的事情

---

谢谢你的帮助

首先要做的是放置此字符串：

var color=Math.floor（Math.random（）*colors.length）；

---

在事件中，因此当单击发生时将生成颜色，否则颜色将始终相同（我没有尝试过，所以可能我错了）

首先要做的是放置此字符串：

var color=Math.floor（Math.random（）*colors.length）；

---

在事件中，因此在单击发生时将生成颜色，否则颜色将始终相同（我没有尝试，所以可能我错了）

您可以将颜色变量设置为每次返回计算值的函数

var color = fn => Math.floor(Math.random() * colors.length);

然后在引用颜色索引时将其作为函数调用

backgroundColor: colors[color()]

---

可以将颜色变量设置为每次返回计算值的函数

var color = fn => Math.floor(Math.random() * colors.length);

然后在引用颜色索引时将其作为函数调用

backgroundColor: colors[color()]

---

问题中的

javascript

有四个问题

• 选择器

  “getQuote”

  不是

  html

  元素；选择器字符串开头缺少

  “#”

• 默认情况下，jQuery不会设置颜色动画
  动画属性和值
  所有已设置动画的属性应设置为单个数值， 除非下文另有说明；大多数非数字属性不能为空 使用基本jQuery功能（例如，宽度、高度、， 或“左”可以设置动画，但不能设置背景色，除非 使用插件）

• 在传递给

  .animate（）

  的第一个参数处缺少开头

  {

  ；例如，

  .animate（{property:value}）

• color

  变量不会在

  #getQuote

  元素的每个

  单击事件中更改，因为
  color
  是在
  之外定义的。click（）
  处理程序
  

可以使用jQuery UI设置颜色动画

$（函数（）{
变量颜色=['#E9967A'、'#FF8C00'、'#4682B4'、'#CD853F'
"008080","27ae60","2c3e50","f39c12"
"e74c3c","9b59b6","fb9664","bdbb99"
","77b1a9","73a857",；
$（“#getQuote”）。单击（函数（）{
var color=Math.floor（Math.random（）*colors.length）；
$（“html正文”）.animate({
背景颜色：颜色[颜色]
}, 1000);
});
})

正文{
宽度：100vw；
高度：100vh；
}

点击
javascript有四个问题


选择器
“getQuote”
不是
html
元素；选择器字符串开头缺少
“#”

默认情况下，jQuery不会设置颜色动画

动画属性和值

所有已设置动画的属性应设置为单个数值，
除非如下所述；大多数非数字属性不能
使用基本jQuery功能（例如，宽度、高度、，
或“左”可以设置动画，但不能设置背景色，除非
使用插件）


在传递给
.animate（）
的第一个参数处缺少开头
{
；例如，
.animate（{property:value}）

color
变量不会在
#getQuote
元素的每个
单击事件中更改，因为
color
是在
之外定义的。click（）
处理程序


可以使用jQuery UI设置颜色动画


$（函数（）{
变量颜色=['#E9967A'、'#FF8C00'、'#4682B4'、'#CD853F'
"008080","27ae60","2c3e50","f39c12"
"e74c3c","9b59b6","fb9664","bdbb99"
","77b1a9","73a857",；
$（“#getQuote”）。单击（函数（）{
var color=Math.floor（Math.random（）*colors.length）；
$（“html正文”）.animate({
背景颜色：颜色[颜色]
}, 1000);
});
})
正文{
宽度：100vw；
高度：100vh；
}

点击
您需要重新分配颜色以调用random，从而生成一个新的数字，否则
color
在生成后保持不变。如果不使用jQuery UI，背景属性将不会动画化，除非您使用CSS3和
body{transition:0.5s；}
。如果您希望始终生成新颜色，您的随机设置也需要在单击事件中。根据建议修改您的问题无助于跟踪您的问题，提供的答案可能至少看起来很有趣。
$（“getQuote”）
您是否看到此处缺少任何内容？（我看到了。）您需要重新分配颜色以调用random，从而生成一个新的数字，否则
color
在生成后保持不变。如果不使用jQuery UI，背景属性将不会动画化，除非您使用CSS3和
body{transition:0.5s；}
。如果您希望始终生成新颜色，您的随机设置也需要在单击事件中。根据建议修改您的问题无助于跟踪您的问题，提供的答案可能至少看起来很有趣。
$（“getQuote”）
您是否看到此处缺少任何内容？（我看到了。）