title: jQuery animate font-size decrease: animate shrinking from all sides
body: <p>I have a simple jsFiddle here where pos2 takes the css from pos1 and animates a transition to overlay pos2 over pos1. <a href="http://jsfiddle.net/4beEM/4/" rel="nofollow">http://jsfiddle.net/4beEM/4/</a></p>
  
  <p>As you can see, when clicked, pos2 shrinks to the upper left. Instead I would like the text to shrink on all sides, into the center. How is this possible with the code below? </p>
  
  <pre><code>var $pos1 = $('#pos1'),
  $pos2 = $('#pos2'),
  pos1Css = {
      position : {'top': $pos1.offset().top + "px",
                  'left': $pos1.offset().left + "px"},
      fontSize: {'font-size': $pos1.css('font-size')}
  }
  
  $pos2.click(function() {
      $(this).animate(pos1Css.fontSize, 1000)
          .delay(100)
          .animate(pos1Css.position, 1000)
  })
  </code></pre>