Jquery animate background code not working!_问答_开发者

See I have a jquery code which I thought that it should work but still it's not working! So please can 开发者_如何学Pythonhelp 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!

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

I found this paragraph on http://api.jquery.com/animate/:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

It says that background-color cannot be animated.

From the animate page on jQuery docs:

"All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable."

In addition to the other answers, which correctly cite the animate() docs, it is possible to animate the background-color with either the color plug-in, or using the jQuery UI.

JS Fiddle usage demo.

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>

jQuery doesn't support color animations so you'll need the color plugin or, jQuery UI.

you can use this properties only on the plugins

this is the library http://plugins.jquery.com/files/jquery.colorBlend.js_6.txt