Jquery 动画后台代码不起作用！

发布于 2024-10-22 04:27:41 字数 370 浏览 2 评论 0原文

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

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

我在stackoverflow上搜索过，没有找到好的解决方案。所以请帮我解决这个问题。

提前致谢！

原文

See I have a jquery code which I thought that it should work but still it's not working! So please can help me out. Th input have original background color #fff and I want that on focusing that input the background color should change into #789 with a fade effect. Here is the code that I have made.

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

I have search through the stackoverflow and had not found a good solution. So please help me out with this.

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2024-10-29 04:27:41

仅使用 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);
        }
    });
});

With just the jQuery lib you cannot animate the background color. But you can animate it with the jQuery UI on top of it.

So this works fine

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

Some years later, here are better alternatives:

Using 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;
}

Using only jQuery (without 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);
        }
    });
});

回复收藏 0 原文

天煞孤星 2024-10-29 04:27:41

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

所有动画属性都应该是
动画为单个数值，
除下述情况外；大多数属性
非数字不能是
使用基本 jQuery 进行动画处理
功能。（例如，宽度，
height 或 left 可以设置动画，但是
背景颜色不能。）属性
值被视为多个
像素，除非另有说明。这
可以指定单位 em 和 %，其中
适用。

它说背景颜色不能动画。

回复收藏 0 原文

林空鹿饮溪 2024-10-29 04:27:41

从 jQuery 文档的 animate 页面：

“所有动画属性都应该动画化单个数值，除非如下所述；大多数非数值属性无法使用基本 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行处理。）。除非另有说明，否则可以在适用的情况下指定单位 em 和 %。”

回复收藏 0 原文

毅然前行 2024-10-29 04:27:41

除了正确引用 animate() 文档的其他答案之外，可以使用颜色插件< /a>，或使用 jQuery UI。

JS Fiddle 使用演示。

回复收藏 0 原文

☆獨立☆ 2024-10-29 04:27:41

查看此链接
此处：

看起来您将需要 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>

Check out this link
here:

It looks as though you will need the jQuery color plugin

I tried with a test of your code and it works having saved the color plugin locally:

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

回复收藏 0 原文