title: Making a jQuery scaled <div> stay at its new size
body: <p>I've got a circular <code>div</code> I'm trying to scale when a button is clicked:</p>
  
  <pre><code>&lt;button id="2007"&gt;2007&lt;/button&gt;
  &lt;div id="test2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've got it styled with CSS for starters:</p>
  
  <pre><code>#test2 {
    background-color: red;
    opacity:0.5;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    position: absolute;
    z-index:2;
  }
  </code></pre>
  
  <p>And my JS works to reduce the div size FROM THE MIDDLE CENTER, just as I'd like:</p>
  
  <pre><code>$("#2007").click(function(){
      $("#test2").effect("scale",{percent: 50},"1000");
  });
  </code></pre>
  
  <p>Problem is, as soon as the scale effect is finished, the DIV reverts back to its original size and jumps to a new position.</p>
  
  <p>Does anyone know how I can keep the DIV at its scaled-to dimensions AND prevent it from jumping to reposition?</p>
  
  <p><a href="http://jsbin.com/ogicuj/6/edit" rel="nofollow">Here's a JSbin example</a> - just click the "2007" button to see what's happening.</p>
  
  <p><strong>EDIT:</strong> I've added a <a href="http://jsfiddle.net/Koubenec/JQdHf/" rel="nofollow">JSFiddle</a></p>
  
  <p>Changing <code>.effect</code> to <code>.animate</code> doesn't work at all, and I'm sure there must be a way to use <code>.effect</code> without having the <code>div</code> jump, but I'm still stumped.</p>