0

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!

Jack Billy
  • 7,141
  • 6
  • 27
  • 38

6 Answers6

6

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);
        }
    });
});
Jose Rui Santos
  • 15,009
  • 9
  • 58
  • 71
2

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.

Community
  • 1
  • 1
Sarah West
  • 2,047
  • 2
  • 20
  • 37
  • 1
    But I have seen this type of in twitter. So I think it might be possible. – Jack Billy Mar 15 '11 at 11:48
  • But anyways. Thanks for the advice I will keep record of that. – Jack Billy Mar 15 '11 at 11:49
  • You could try to set the background-color after the animation using $(this).css("background-color": "#789"); – Sarah West Mar 15 '11 at 11:51
  • 1
    Sorry but it is not working for me and the whole code has been crashed none of jquery is working now. Can you suggest something as you are a pro. – Jack Billy Mar 15 '11 at 11:56
  • You're right: $(this).css("background-color", "#789"); this should work, I typed a ":" instead of a "," sorry! – Sarah West Mar 15 '11 at 12:00
  • Hey it worked! The link you just gave me helped! Thanks you all guys! Specially Sarah! Thanks a lot! – Jack Billy Mar 15 '11 at 12:01
  • $(this).css("background-color", "#789") does not make any background animation, it simply sets the background color. As I said, to make background animation you need the JQuery UI – Jose Rui Santos Mar 16 '11 at 07:21
  • I know, it was only my first idea to improvise. But then I found the link I posted above where you can see a demo which is also working with jQueryUI. – Sarah West Mar 17 '11 at 08:43
1

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

Alex
  • 7,320
  • 1
  • 18
  • 31
0

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>
Community
  • 1
  • 1
Swaff
  • 13,548
  • 4
  • 26
  • 26
0

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.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

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

Mary Daisy Sanchez
  • 947
  • 1
  • 12
  • 26