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