动画没有按预期工作

Question

这是我的 jQuery 函数：

var flashField = function ($field) {
    var colour = $field.css('background-color'); // gets colour ok
    $field.css( 'backgroundColor', '#FF0000' ); // sets background ok
    $field.animate({ 'backgroundColor': colour }, 1500); // nada
}

我想抓取元素的当前背景，将其切换为红色，然后逐渐变回原始颜色。

但是 animate 函数没有执行任何操作，控制台中也没有显示任何错误。

我做错了什么？已尝试搜索但找不到任何显示错误语法或其他内容的内容。

（在 Chrome 45.0.2454.93 m 中测试）

Answer 1

您需要使用 jquery-ui.js 来设置动画颜色。来自 documentation:

jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.

  $(function() {
    var state = true;
    $("#button").click(function() {
      if (state) {
        $("#effect").animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000);
      } else {
        $("#effect").animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000);
      }
      state = !state;
    });
  });

.toggler {
  width: 500px;
  height: 200px;
  position: relative;
}
#button {
  padding: .5em 1em;
  text-decoration: none;
}
#effect {
  width: 240px;
  height: 135px;
  padding: 0.4em;
  position: relative;
  background: #fff;
}
#effect h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>

动画没有按预期工作

Animate not working as expected

jquery

jquery-animate