Jquery 动画背景代码不起作用！答案

【问题标题】：Jquery animate background code not working!Jquery 动画背景代码不起作用！
【发布时间】：2011-03-15 11:38:31
【问题描述】：

看到我有一个 jquery 代码，我认为它应该可以工作，但仍然无法正常工作！所以请帮帮我。输入具有原始背景颜色#fff，我希望专注于输入背景颜色应更改为#789，并具有淡入淡出效果。这是我制作的代码。

$('input.login_reg_input').focus(function () {
   $(this).animate({
     backgroundColor:fadeColor
   }, 250, 'linear', function() { });
});

我已经通过 stackoverflow 搜索并没有找到一个好的解决方案。所以请帮我解决这个问题。

提前致谢！

【问题讨论】：

如果您不太在意旧版浏览器，您实际上也可以使用 CSS 3 来执行此操作 :-)
@Jack Billy 我为我的答案添加了更好的选择

标签： jquery html jquery-animate

【解决方案1】：

仅使用 jQuery 库，您无法为背景颜色设置动画。但是您可以在其上使用 jQuery UI 为其设置动画。

所以这很好用

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $('input.login_reg_input').focus(function () {
                $(this).animate({
                    'backgroundColor': '#768'
                }, 250, 'linear', function() { });
            });
        });
    </script>
</head>
<body>
    <input class="login_reg_input">click me</input>
</body>
</html>

几年后，这里有更好的选择：

使用 CSS3

jsFiddle

input.login_reg_input {
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}

input.login_reg_input:focus {
    background-color: #789;
}

仅使用 jQuery（不使用 jQuery UI）

jsFiddle

$('input.login_reg_input').focus(function () {
    var $elem = $(this),
        cnt = 0,
        from = {    // animate from white (reg, green, blue) 255
            r: 255,
            g: 255,
            b: 255
        },
        to = {    // to #778899 (119, 102, 136)
            r: 119,
            g: 102,
            b: 136
        };

    // interpolate "from" color to the "to" color
    $(from).animate(to, {
        duration: 1000,
        step: function(now) {
            // step is invoked for each r, g and b.
            if (++cnt % 3 === 0) {  // I want to process only when the whole triple is interpolated
                $elem.css('background-color',
                          'rgb('
                              + Math.round(this.r) + ',' 
                              + Math.round(this.g) + ','
                              + Math.round(this.b) + ')');
            }
            // confused? Just uncomment line below and you will get the hang of it
            // console.log(now, this);
        }
    });
});

【讨论】：

感谢您的建议！非常感谢！谢谢！

【解决方案2】：

我在http://api.jquery.com/animate/找到了这一段：

所有动画属性都应该是动画到单个数值，除非如下所述；大多数属性不能是非数字的使用基本 jQuery 制作动画功能。（例如，宽度，高度或左侧可以设置动画，但背景颜色不能。）属性值被视为一些像素，除非另有说明。这单位 em 和 % 可以在哪里指定适用。

它说背景颜色不能动画。

【讨论】：

但我在推特上看到过这种类型的。所以我认为这是可能的。
但无论如何。感谢您的建议，我会记录下来。
您可以尝试使用 $(this).css("background-color": "#789"); 设置动画后的背景色；
对不起，但它对我不起作用，整个代码已经崩溃，现在 jquery 都没有工作。作为专业人士，您能提出一些建议吗？
你是对的：$(this).css("background-color", "#789");这应该可行，我输入了“：”而不是“，”对不起！

【解决方案3】：

来自 jQuery 文档上的 animate 页面：

“所有动画属性都应该被动画化为一个单一的数值，除了下面提到的；大多数非数字属性不能使用基本的 jQuery 功能来动画。（例如，宽度、高度或左侧可以动画，但是background-color 不能。）除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。"

【讨论】：

【解决方案4】：

除了正确引用animate() 文档的其他答案之外，还可以使用color plug-in 或jQuery UI 为background-color 设置动画。

JS Fiddle usage demo.

【讨论】：

【解决方案5】：

查看此链接 here:

看起来你需要 jQuery color plugin

我尝试测试您的代码，并且在本地保存颜色插件后它可以正常工作：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script src="jquery.color.js"></script>
</head>
<body>
    <input class="login_reg_input" type="text" />

    <script>

    $('input.login_reg_input').focus(function () {
        $(this).stop().animate({
        backgroundColor:'yellow'
    }, 250, 'linear', function() { });
    });

    </script>

</body>
</html>

【讨论】：

【解决方案6】：

jQuery 不支持彩色动画，因此您需要颜色插件或 jQuery UI。

您只能在插件上使用此属性

这是图书馆 http://plugins.jquery.com/files/jquery.colorBlend.js_6.txt

【讨论】：