jquery - 背景颜色在jquery中不起作用

Question

jQuery

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").animate({backgroundColor: '#00f', width: '50%', marginLeft: '50px'});
  });
});
</script>

html

<h2>This is a heading</h2>
<p style="background: #ff0">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

我正在学习 jquery 并发现在我的测试中使用 css as margin-leftto marginLeftlike thismarginLeft工作但backgroundColor无法工作。我在这里还是我错了？

Answer 1

要为背景颜色设置动画，您需要包含一个支持它的插件，如jquery UI或jquery color。

http://jsfiddle.net/GW5hB/

Answer 2

基于此答案，在没有 jQueryUI 的情况下为颜色设置动画的可能解决方法：

function toRGB(hexStr) {
    var s = hexStr.substring(1);
    if (s.length==3) {
        s = s.charAt(0) + s.charAt(0) + s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2);
    }
    var i = parseInt(s, 16);
    var rcolor = (i & 0xff0000) >> 16;
    var gcolor = (i & 0x00ff00) >> 8;
    var bcolor = i & 0x0000ff;
    return { r:rcolor, g:gcolor, b:bcolor };
}

$('button').click(function(){
    var elem = $('div');
    var c1 = toRGB('#ffffff'), c2 = toRGB('#0000ff');
    $(c1).animate(c2, {
        duration:2000,
        step: function(){
            elem.css('backgroundColor', 'rgb('+parseInt(this.r)+','+parseInt(this.g)+','+parseInt(this.b)+')');
        }
    });

});

jsfiddle

Answer 3

看来你不包括jqueryUi.js

您需要将其包含在内（包含后jquery.js）

<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>

• http://jqueryui.com/animate/

jQuery UI 捆绑了 jQuery Color 插件，这些插件提供了颜色动画以及许多用于处理颜色的实用功能。

Answer 4

您将需要一个启用背景颜色动画的插件

从文档：

（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置，除非使用 jQuery.Color() 插件）。