.animate 中的属性？

Question

我正在尝试在有人按下按钮时更改我的背景颜色，但它似乎不起作用。

我将十六进制颜色存储在一个数组中，然后使用 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);
    });
  });

编辑我发布了所有代码以更好地了解发生了什么

感谢您的帮助！

Answer 1

首先想到的是放置这个字符串： var color = Math.floor(Math.random() * colors.length); 在事件中，所以颜色会在点击发生时生成，否则它总是相同的颜色（我没有尝试所以可能我错了）

Answer 2

你可以把你的颜色变量变成一个函数，每次returns一个计算值

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

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

backgroundColor: colors[color()]

Answer 3

问题 javascript 有四个问题。

选择器 "getQuote" 不是 html 元素；选择器字符串开头缺少 "#"。
jQuery .animate() 默认不设置动画颜色

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).
传递给 .animate() 的第一个参数缺少开头 {；例如，.animate({property:value})
color 变量不会在 #getQuote 元素的每个 click 事件中改变，因为 color 是在 .click() 之外定义的处理程序

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

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];

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

})

body {
  width: 100vw;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>

<body>
  <button id="getQuote">click</button>
</body>

您也可以在 body 选择器中使用 css transition，.css()

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];


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

})

body {
  width: 100vw;
  height: 100vh;
  transition: background-color 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>

<body>
  <button id="getQuote">click</button>
</body>

.animate 中的属性？

properties in .animate?

javascript

css

jquery

jquery-animate