Question

看到我有一个jquery代码，我认为它应该可以工作，但它仍然无法正常工作！所以请帮帮我。输入具有原始背景颜色#fff，我希望在聚焦输入时，背景颜色应该变为带有淡入淡出效果的#789。这是我所做的代码。

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

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

提前致谢！

Answer 1

只有jQuery lib，您无法为背景颜色设置动画。但您可以使用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);
        }
    });
});

Answer 2

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

所有动画属性都应该是动画为单个数值，除非如下所述;大部分属性那些非数字不可能使用基本的jQuery动画功能。（例如，宽度，高度，或左边可以动画但是背景颜色不能。）财产值被视为一些像素除非另有说明。该单位em和％可以指定在哪里适用。

它说背景颜色无法动画。

Answer 3

来自jQuery docs的animate页面：

“除非如下所述，否则所有动画属性都应设置为单个数字值;大多数非数字属性无法使用基本jQuery功能进行动画处理。（例如，宽度，高度或左侧可以设置动画但是background-color不能。）除非另有说明，否则属性值被视为多个像素。可以在适用的地方指定单位em和％。“

Answer 4

查看此链接 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>

Answer 5

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

JS Fiddle usage demo

Answer 6

jQuery不支持彩色动画，所以你需要颜色插件或jQuery UI。

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

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

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

6 个答案:

使用CSS3

仅使用jQuery（不使用jQuery UI）