title: jQuery - Animating textarea box height - Performance Issue
body: <p>Please keep in mind I'm still in the early learning stage of jQuery.</p>
  
  <p>Having animation performance issue with the code below. It doesn't show performance issues in jsfiddle but on the website I'm constructing the .js file and html file is huge! </p>
  
  <p>The purpose of the code is to animate a textarea height on focus and blur the box to the original height.</p>
  
  <p>I thought combining the functions might increase performance but the opposite happened.  </p>
  
  <pre><code>$("#productsServiceDescription, #targetAudienceDescription").focus(function() {
  
      $(this).animate({
          height: 100
      }, "normal"),
  
      $(this).blur(function() {
          $(this).animate({
              height: 51
          }, "normal")
      });
  });​    
  </code></pre>
  
  <p>Code Here</p>
  
  <p><a href="http://jsfiddle.net/clearpixelsolutions/Yn477/" rel="nofollow">http://jsfiddle.net/clearpixelsolutions/Yn477/</a></p>
  
  <p>Here's the code with functions separated, performance is so so on the animation, but combined like shown above its awful.</p>
  
  <pre><code>$("#productsServiceDescription, #targetAudienceDescription").focus(function() {
  
      $(this).animate({
          height: 100
      }, "normal"),
  });
  $("#productsServiceDescription, #targetAudienceDescription").blur(function() {
  
      $(this).animate({
          height: 51
      }, "normal")
  });​
  </code></pre>
  
  <p>I was wanting to combine the functions to eliminate reproducing the id tags. I will have a total of 15 ids or so using this function.</p>
  
  <p>I'm hoping someone might tell me what I'm doing wrong and how to optimize the code.</p>