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，发现在我的测试margin-left中使用css作为marginLeft到marginLeft这样，但是backgroundColor无法正常工作。我是在这里还是我错了？

Answer 1

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

http://jsfiddle.net/GW5hB/

Answer 2

似乎你没有包括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 3

您需要一个能够动画显示背景颜色的插件

来自documentation：

（例如，除非使用了jQuery.Color（）插件，否则宽度，高度或左边都可以设置动画，但不能使用背景颜色。）

Answer 4

基于this answer：

，在没有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

背景颜色在jquery中不起作用

4 个答案: