Animating Color with jQuery Step Function and CSS rgb()

Question

I'm trying to do a simple width and background color animation with jQuery (similar to apple.com's search box).

Basically, you focus a form field, and its parent changes background color and gets wider, then, on blur, the parent's width and background color change back.

I don't want to load the jQuery Color plugin for such a simple thing, so I found a work around. The problem is, the background color animates perfectly on focus, but on blur nothing changes. Any help would be greatly appreciated.

Here's my code: (the starting background-color is rgb(243, 243, 243) if you were wondering where that number comes from)

$('#s').focus(function() {
    $('#header-search-form').animate(
        {'width': '175px'}, { 
        duration  : 150,
        easing    : 'swing',
        step      : function( now, fx ) {
            var completion = ( now - fx.start ) / ( fx.end - fx.start );
            $('#header-search-form').css( 'backgroundColor', 'rgb(' + 243+(255-243)*completion + ',' + 243+(255-243)*completion + ',' + 243+(255-243)*completion + ')' );
        }           
    });
});
$('#s').blur(function() {
    $('#header-search-form').animate(
        {'width': '125px'}, {
        duration  : 150,
        easing    : 'swing',
        step      : function( now, fx ) {
            var completion = ( now - fx.start ) / ( fx.end - fx.start );                    
            $('#header-search-form').css( 'backgroundColor', 'rgb(' + 255-(255-243)*completion + ',' + 255-(255-243)*completion + ',' + 255-(255-243)*completion + ')' );               
        }                   
    });
});

Answer 1

These numbers are values of Red Green and Blue colors rgb(red, green, blue) this range is between 0 to 255 so rgb(255,255,255) is white and rgb(0,0,0) is black.

        $('#s').focus(function() {
        $('#header-search-form').animate(
    { 'width': '175px' }, {
        duration: 150,
        easing: 'swing',
        step: function(now, fx) {
            var completion = (now - fx.start) / (fx.end - fx.start);
            $('#header-search-form').css('backgroundColor', 'rgb(' + (243 + (255 - 243) * completion) + ',' + (243 + (255 - 243) * completion) + ',' + (243 + (255 - 243) * completion) + ')');
        }
    });
    });
    $('#s').blur(function() {
        $('#header-search-form').animate(
    { 'width': '125px' }, {
        duration: 150,
        easing: 'swing',
        step: function(now, fx) {
            var completion = (now - fx.start) / (fx.end - fx.start);
            $('#header-search-form').css('backgroundColor', 'rgb(' + (255 - (255 - 243) * completion) + ',' + (255 - (255 - 243) * completion) + ',' + (255 - (255 - 243) * completion) + ')');
        }
    });
    });

Answer 2

What you need to do is actually create a variable that holds valid numbers for colors, then it will work.

See this fiddle : http://jsfiddle.net/2X6QL/

It will show you the numbers returned in your step function, and if they look like rgb numbers between 0 and 255 to you, then your golden, to me the numbers does not look like they will change colors any time soon, and the color animation does not work for me, it turns white because the numbers are off.

I'm not sure how to exactly calculate the numbers for you, as I have no idea what colors your are tryning to match, but I see you are close to some numbers in your calculations, maybe a math.round or parseInt will solve it, I'll have another look and see if rounding the numbers will work?

And it did, here is a working Fiddle : http://jsfiddle.net/2X6QL/3/

The code:

var completion, color;
$('#s').focus(function() {
    $('#header-search-form').animate({
        width: 175
      }, { 
        duration  : 1500,
        easing    : 'swing',
        step      : function(now, fx) {
            completion = ( now - fx.start ) / ( fx.end - fx.start );
            color = Math.round(243+(255-243)*completion) +', '+ Math.round(243+(255-243)*completion) +', '+ Math.round(243+(255-243)*completion);
            $('#header-search-form').css( 'backgroundColor', 'rgb('+color+')' );
        }           
    });
}).blur(function() {
    $('#header-search-form').animate({
        width: 125
       }, {
        duration  : 1500,
        easing    : 'swing',
        step      : function(now, fx) {
            completion = ( now - fx.start ) / ( fx.end - fx.start );                    
            color = Math.round(255-(255-243)*completion) + ', ' + Math.round(255-(255-243)*completion) + ', ' + Math.round(255-(255-243)*completion);
            $('#header-search-form').css( 'backgroundColor', 'rgb('+color+')' );
        }                   
    });
});