title: Animating Color with jQuery Step Function and CSS rgb()
body: <p>I'm trying to do a simple width and background color animation with jQuery (similar to apple.com's search box). </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Here's my code: (the starting background-color is <code>rgb(243, 243, 243)</code> if you were wondering where that number comes from)</p>
  
  <pre><code>$('#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 + ')' );               
          }                   
      });
  });
  </code></pre>