Jquery动画背景代码不工作！_Jquery_Html_Jquery Animate

Jquery动画背景代码不工作！

jquery html

Jquery动画背景代码不工作！,jquery,html,jquery-animate,Jquery,Html,Jquery Animate,看，我有一个jquery代码，我认为它应该工作，但它仍然不工作！所以请你能帮我一下。输入具有原始背景色#fff，我希望在聚焦输入时，背景色应变为带有淡入效果的#789。这是我编写的代码 $('input.login_reg_input').focus(function () { $(this).animate({ backgroundColor:fadeColor }, 250, 'linear', function() { }); }); 我已经搜索了stackover

看，我有一个jquery代码，我认为它应该工作，但它仍然不工作！所以请你能帮我一下。输入具有原始背景色

#fff

，我希望在聚焦输入时，背景色应变为带有淡入效果的

#789

。这是我编写的代码

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

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

提前谢谢

我发现这一段是关于：

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

它表示背景色无法设置动画。

来自jQuery文档的页面：

除以下说明外，所有已设置动画的属性都应设置为单个数值；大多数非数值属性不能使用基本的jQuery功能设置动画。（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置。）除非另有规定，否则属性值将被视为像素数。可以在适用的情况下指定单位em和%。“

查看此链接 :

看起来您需要jQuery

我尝试了对您的代码进行测试，并在本地保存了颜色插件后，测试成功：

<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>


$（'input.login\u reg\u input'）。焦点（函数（）{
$（this）.stop（）.animate({
背景颜色：“黄色”
}，250，'线性'，函数（）{}）；
});

仅使用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>

仅使用jQuery（不使用jQuery UI）

除了正确引用文档的其他答案外，还可以使用或使用设置

背景色的动画
.
jQuery不支持彩色动画，因此您需要彩色插件或jQuery UI
您只能在插件上使用此属性
这是图书馆
但我在twitter上看到过这种类型的信息。所以我认为这是可能的，但无论如何。谢谢你的建议，我会记录下来的。你可以尝试在动画结束后使用$（this.css（“background color”）：“#789”）设置背景色；很抱歉，它对我不起作用，整个代码都崩溃了，jquery现在都不起作用。作为一名专业人士，你能提出一些建议吗？你是对的：$（this.css（“背景色”），“#789”）；这应该行得通，我键入了“：”而不是“，”对不起！谢谢你的建议！非常感谢！非常感谢。如果你不太在意老式浏览器的话，你也可以使用CSS 3来实现这一点：-）@Jack Billy我已经为我的答案添加了更好的选择
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;
}

$('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);
        }
    });
});